Cube Chart Editor SDK

Cube Chart Editor SDK 是一个功能强大的图表设计器组件，允许用户通过可视化界面创建和编辑 Cube Dashboard 图表。

特性

• 🎨 可视化编辑：直观的拖拽式界面，轻松配置图表维度、指标和样式。
• 📊 丰富图表库：内置 15+ 种图表类型，满足各种可视化需求。
• ⚡ 智能辅助：支持智能推荐图表类型和配置。
• 🔌 简单集成：提供 React 组件 API，支持嵌入到任何 React 应用中。
• 🛠 独立配置：支持通过 Props 传递 API 配置，不依赖全局变量。

安装

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

快速开始

import React from "react";
import { ChartEditorSDK } from "@albertluo213/cube-chart-editor";

const App = () => {
  const handleSave = (chartConfig) => {
    console.log("Chart saved:", chartConfig);
    // 保存配置到你的后端
  };

  const handleCancel = () => {
    console.log("Edit cancelled");
  };

  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <ChartEditorSDK
        chartId="new-chart" // 或现有图表 ID
        apiConfig={{
          baseURL: "http://your-api-host:8000", // Cube Transform API 地址
          userId: "user-123", // 当前用户 ID
          headers: {
            Authorization: "Bearer your-token", // 可选：自定义请求头
          },
        }}
        onSave={handleSave}
        onCancel={handleCancel}
      />
    </div>
  );
};

export default App;

API 参考

ChartEditorSDK

| 属性 | 类型 | 必填 | 默认值 | 说明 | | ------------------- | -------------------------- | ---- | ---------------- | -------------------------------- | | chartId | string | 否 | - | 图表 ID（编辑现有图表时提供） | | config | object | 否 | - | 初始图表配置（创建新图表时提供） | | apiConfig | object | 是 | {} | API 配置对象 | | apiConfig.baseURL | string | 是 | - | API 基础 URL | | apiConfig.userId | string | 否 | 'default_user' | 用户 ID | | apiConfig.headers | object | 否 | {} | 自定义请求头 | | onSave | (config: object) => void | 是 | - | 保存回调，参数为图表配置对象 | | onCancel | () => void | 是 | - | 取消回调 | | style | CSSProperties | 否 | - | 容器样式 | | className | string | 否 | - | 容器类名 |

开发与构建

环境要求

• 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 会自动解析并打包这些依赖。确保你的开发环境能够访问到主项目的源码目录。