Cube Chart Render SDK

Cube Chart Render SDK 是一个基于 React 和 VChart 的图表渲染库，用于在任何 React 应用中轻松嵌入和展示 Cube Dashboard 的图表。

特性

• 📊 多种图表类型：支持柱状图、折线图、饼图、雷达图、漏斗图等 15+ 种图表。
• 🎨 高度可定制：支持自定义主题、样式和交互行为。
• 🔌 简单集成：提供简单的 React 组件 API，轻松集成到现有项目。
• 🛠 独立配置：支持通过 Props 传递 API 配置，不依赖全局变量。

安装

npm install @albertluo213/cube-chart-render
# 或
yarn add @albertluo213/cube-chart-render

快速开始

import React from "react";
import { ChartRenderSDK } from "@albertluo213/cube-chart-render";

const App = () => {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <ChartRenderSDK
        chartId="your-chart-id"
        apiConfig={{
          baseURL: "http://your-api-host:8000", // Cube Transform API 地址
          userId: "user-123", // 当前用户 ID
          headers: {
            Authorization: "Bearer your-token", // 可选：自定义请求头
          },
        }}
        filters={[
          // 可选：自定义过滤器
          {
            field: "createBy.country_id.countryName",
            operator: "equals",
            values: ["China"],
          },
        ]}
        onLoad={(title) => console.log("Chart loaded:", title)}
        onError={(err) => console.error("Chart error:", err)}
      />
    </div>
  );
};

export default App;

API 参考

ChartRenderSDK

| 属性 | 类型 | 必填 | 默认值 | 说明 | | ------------------- | ------------------------- | ---- | ---------------- | ------------------------------------------ | | chartId | string | 是 | - | 图表 ID | | apiConfig | object | 是 | {} | API 配置对象 | | apiConfig.baseURL | string | 是 | - | API 基础 URL | | apiConfig.userId | string | 否 | 'default_user' | 用户 ID | | apiConfig.headers | object | 否 | {} | 自定义请求头 | | filters | Array | 否 | [] | 外部过滤器 [{ field, operator, values }] | | config | object | 否 | - | 直接传入图表配置（不从后端加载） | | showTitle | boolean | 否 | true | 是否显示标题栏 | | style | CSSProperties | 否 | - | 容器样式 | | className | string | 否 | - | 容器类名 | | onLoad | (title: string) => void | 否 | - | 加载完成回调 | | onError | (error: Error) => void | 否 | - | 错误回调 |

开发与构建

环境要求

• Node.js >= 16
• npm 或 yarn

构建步骤

1. 安装依赖

   npm install

2. 开发模式

   npm run dev

3. 构建生产包

   npm run build

   构建产物将输出到 dist 目录：

   • dist/index.esm.js (ES Module)
   • dist/index.cjs.js (CommonJS)

依赖说明

本 SDK 依赖于主项目 (../../src) 中的组件。在构建时，Vite 会自动解析并打包这些依赖。确保你的开发环境能够访问到主项目的源码目录。

npm run build npm publish --access public