后端数据分析数据可视化数据库【免费下载链接】cube Cube Core is open-source semantic layer for AI, BI and embedded analytics项目地址https://gitcode.com/gh_mirrors/cu/cube点击查看免费下载Vizard 是 Cube 开源仓库Cube Core 语义层内置在 Playground 中的一个独立 Web 应用你只需提供 Cube API 地址、Token、查询语句Query和透视配置Pivot Config它就会自动为你挑选出适配的框架、语言与图表库生成一份可直接运行的示例应用源码并通过 iframe 提供真实数据驱动的实时预览。读完本文你将掌握 Vizard 的完整配置方式、运行与构建流程、参数校验机制以及从源码层面理解代码生成 实时预览这一整套工作链路从而快速搭建你自己的 Cube 前端可视化 Demo 或基于该模式扩展新的模板应用。Vizard 是什么Cube 生态中的示例应用生成器Vizard 的定位在 vizard/README.md 中有清晰定义Vizard is a web application that allows you to receive an application code example for your framework, visualization library and language using your Cube API params for live preview.也就是说Vizard 是一个按需生成前端示例代码的 Web 应用它把Cube API 参数API URL、Token、查询、透视配置作为输入把可运行的示例应用源码作为输出并且输出之后还能直接以 live preview 的形式在浏览器里看到真实数据渲染的图表。从仓库结构看Vizard 位于 packages/cubejs-playground/vizard 目录与 Playground数据模型 IDE 与查询工作台同属于 cubejs-playground 包但它是独立运行的 Vite React 应用包名为vizard-preview见 package.json不依赖 Playground 本体即可启动。其核心能力可以拆成三个层面参数输入层读取.env.local中的 Cube API 参数选项组合层按可视化类型 → 框架 → 语言 → 图表库的层级关系筛选出可用的技术栈组合见 app-options.js代码生成与预览层依据组合结果选择模板应用文件树动态注入.env.local配置并在右侧 iframe 中渲染真实图表见 app-files.ts 与 Preview.tsx。快速上手四个环境变量搞定参数注入Vizard 使用 Vite 构建所有 Cube API 参数都通过环境变量注入。在项目根目录即packages/cubejs-playground/vizard创建.env.local文件并填入以下内容完整示例见 README.md# Create the .env.local file in the root of the project and copy the content of this file filling it with your params VITE_CUBE_API_URLhttps://{domain or IP}/cubejs-api/v1 VITE_CUBE_API_TOKEN{YOUR API TOKEN} VITE_CUBE_QUERY{QUERY IN JSON} VITE_CUBE_PIVOT_CONFIG{PIVOT CONFIG IN JSON}各变量的含义与格式如下环境变量说明格式要求VITE_CUBE_API_URLCube API 的 REST 端点地址https://{域名或 IP}/cubejs-api/v1VITE_CUBE_API_TOKEN访问 Cube API 所需的认证令牌字符串由 Cube 生成VITE_CUBE_QUERY需要执行的 Cube 查询JSON 字符串如{measures:[Orders.count],dimensions:[Orders.status]}VITE_CUBE_PIVOT_CONFIG控制查询结果如何透视行列转换的配置JSON 字符串如{x:[Orders.status],y:[measures]}这些变量之所以带有VITE_前缀是因为 Vite 只会在构建期把import.meta.env.VITE_*暴露给前端代码。Vizard 在启动时会将这四个变量序列化进页面 URL 的 hash 中见下文参数如何流转一节因此即使之后修改了查询也可以不重新构建、仅通过 URL hash 覆盖默认参数。关于 API URL 的路径约定VITE_CUBE_API_URL需要指向 Cube API 的/cubejs-api/v1前缀。例如本地开发时通常填写http://localhost:4000/cubejs-api/v1Cube Core 默认端口为 4000。Vizard 生成的示例应用会把这个地址连同 Token 一起写入它自己的.env.local确保示例代码 clone 后开箱即用。开发 / 构建 / 预览三条命令的完整闭环README 给出了三个标准命令它们分别对应 package.json 中的 scripts$ yarn dev # 本地开发等价于 yarn prepare vite $ yarn build # 生产构建等价于 yarn prepare tsc vite build $ yarn preview # 本地预览生产构建产物等价于 vite preview值得注意的是dev与build前面都有一个prepare步骤node ./convert-apps.js node ./build-apps.js这意味着convert-apps.js把apps/目录下的模板应用递归读取、按.gitignore规则过滤输出为src/apps.json详见下文模板应用如何变成可注入的文件树build-apps.js负责把各模板应用单独构建成可供 iframe 预览的静态页面。因此任何时候修改了apps/下的模板都必须重新运行yarn dev或yarn build让prepare重新生成apps.json与预览产物否则改动不会生效。vite.config.ts查看中还做了几项对运行有影响的配置base: /vizard/所有静态资源路径都以/vizard/为基准Preview iframe 的地址也是/vizard/preview/{appName}/index.html手动分块manualChunks把react、monaco-editor、cubejs-client/*等拆分为独立 chunk优化首屏加载开发与预览服务器统一设置Cross-Origin-Embedder-Policy: require-corp与Cross-Origin-Opener-Policy: same-origin响应头这是 Monaco Editor 的 Web Worker 正常加载所必需的跨源隔离配置。技术栈选项五类图表 × 三大框架 × 两种语言 × 两种库Vizard 的核心交互是让用户通过右侧面板Setup.tsx自由组合技术栈。全部可选值定义在 app-options.jsexport const APP_OPTIONS { visualization: [line, bar, area, pie, doughnut, table], framework: [react, angular, vue], language: [typescript, javascript], library: [chartjs, antd], };与之对应的展示名称与图标Line/Bar/Area/Pie/Donut 等映射在 options.tsx例如选项值显示名称类型line/bar/area/pie/doughnutLine / Bar / Area / Pie / DonutvisualizationtableTablevisualizationreact/angular/vueReact / Angular / Vueframeworktypescript/javascriptTypeScript / JavaScriptlanguagechartjsChart.jslibraryantdAnt Designlibrary这些类型在 types.ts 中体现为VisualType、FrameworkType、LanguageType、LibraryType等联合类型并组合出VisualParamsvisualization framework language library四元组ConnectionParamsuseWebSockets与useSubscription两个布尔开关AllParamsVisualParams ConnectionParamsChartTypearea | bar | doughnut | line | pie | table最终传给模板应用的图表类型。选项间的依赖校验stats.json 组合矩阵不是所有组合都有效——例如 Angular Chart.js 可能就不可用。Vizard 通过构建期生成的stats.json即VIZARD_PARAMS_MAP维护了一张层级组合矩阵visualization → framework → language → library核心校验逻辑在 helpers.tsvalidateVisualParams(params)按优先级逐级校验四个参数。如果某个层级的值缺失或不在矩阵中就自动回退到该层级第一个可用选项保证任何时候都返回一个合法的VisualParams四元组getAvailableOptions(params)根据当前已选的前 N 个维度过滤出下一维度的可用选项让 UI 只展示可行的组合。这套机制在 Setup.tsx 中被实时调用每当用户在表单里改动 visualization / framework / language / library 中的任意一项都会重新校验并刷新可用选项如果当前组合没有任何图表库支持面板会给出提示 This combination of options supports no charting library yet.见 Setup.tsx。默认状态下Vizard 使用visualization: line作为初始值见 Vizard.tsx其余维度由校验逻辑自动推导。参数如何流转env → URL hash → 预览理解 Vizard 内部的数据流是读懂它改参数即可实时更新预览的关键。整条链路如下启动时写 hash如果 URL 上没有 hashVizard.tsx 会把.env.local中的apiUrl、apiToken、query、pivotConfig序列化为 JSON再btoaencodeURIComponent编码后写入location.hash运行时读 hashVizard 启动时从location.hash解码出VizardProps{ apiUrl, apiToken, query, pivotConfig }并以此为唯一数据源见 Vizard.tsx。如果 hash 非法会抛出Invalid params错误组装 Config把 hash 参数与用户在面板中选定的chartType、useWebSockets、useSubscription合并为Config对象见 Vizard.tsx计算应用名useAppName依据四元组从VIZARD_PARAMS_MAP中查出对应的模板应用名见 app-name.ts任何一层组合非法都会抛出对应错误生成文件树useAppFiles从apps.json取出该模板的完整文件树并动态生成一个.env.local文件节点内容为见 app-files.tsVITE_CUBE_API_URL{apiUrl} VITE_CUBE_API_TOKEN{apiToken} VITE_CUBE_QUERY{JSON.stringify(query)} VITE_CUBE_PIVOT_CONFIG{JSON.stringify(pivotConfig)} VITE_CHART_TYPE{chartType} VITE_CUBE_API_USE_WEBSOCKETS{useWebSockets ? true : false} VITE_CUBE_API_USE_SUBSCRIPTION{useSubscription ? true : false}注意这里比 Vizard 自身的.env.local多了三个变量VITE_CHART_TYPE、VITE_CUBE_API_USE_WEBSOCKETS、VITE_CUBE_API_USE_SUBSCRIPTION——它们是模板应用运行时需要的 6.实时预览Preview组件把整个Config再次编码进 URL hash拼出 iframe 地址/vizard/preview/{appName}/index.html#{hash}并在参数变化时重新加载 iframe见 Preview.tsx。这就是改选项 → 预览立即更新的实现原理。模板应用端如何消费这些参数以仓库内置的 Chart.js 模板 react-typescript-chartjs-areabardoughnutlinepie 为例它在App.tsx中用extractHashConfig见 config.ts从自身 URL hash 中解码 Config覆盖.env.local提供的默认值——hash 的优先级最高这正是 Vizard 主应用注入参数的通道若useWebSockets为真则创建WebSocketTransport({ authorization: apiToken, apiUrl })作为 Cube API 的传输层否则走默认 REST 传输通过cube(apiToken, { apiUrl, transport })创建客户端实例包进CubeProvider用QueryRenderer查看调用useCubeQuery(query, { subscribe })渲染 Loading / Error / 数据三种状态数据到达后交给ChartViewerChart.js 版通过resultSet.chartPivot(pivotConfig)生成 labels、resultSet.series(pivotConfig)生成 datasets再根据chartType选择Line / Bar / Pie / Doughnut组件见 ChartViewer.tsxAnt Design 表格版则用resultSet.tableColumns()生成列、resultSet.tablePivot(pivotConfig)生成行数据渲染Table见 ChartViewer.tsx。这就是你的 Cube API 参数 你选的技术栈 → 真实可运行代码 → 真实数据图表的完整闭环。代码浏览与下载生成结果的三种交付方式在 Code 标签页CodeViewer.tsx中Vizard 将生成的文件树渲染为一个可折叠的左侧文件列表目录图标 文件图标按路径缩进点击文件即打开编辑区编辑区使用Monaco Editor只读模式主题cube见 Editor.tsx进行语法高亮展示。底部工具栏提供了三种交付方式Source 按钮点击下载整个模板应用的源码./download/{appName}.zip即一份完整可独立运行的工程Config 按钮仅下载动态生成的.env.local文件——把这份配置放进任何克隆下来的模板工程根目录即可连上你的 Cube API下载逻辑见 download-file.ts通过 Blob a download触发浏览器下载Docs 按钮跳转到 Vizard 的官方文档页面在 CodeViewer.tsx 中配置。模板应用机制新示例代码如何被纳入Vizard 的示例代码并非写死在前端而是由apps/目录下的模板应用在构建期自动收集。目前仓库内置了两个模板见 apps 目录react-typescript-chartjs-areabardoughnutlinepieReact TypeScript Chart.js覆盖五种图表类型react-typescript-antd-tableReact TypeScript Ant Design Table。convert-apps.js查看的处理逻辑是遍历apps/下每个子目录若存在.vizardignore文件则整体跳过解析模板自身的.gitignore并强制忽略.gitignore本身用minimatch做路径匹配过滤掉应忽略的文件如node_modules、构建产物递归读取剩余文件构造{ name: { file: { contents } } }/{ name: { directory: {...} } }形式的嵌套结构最终写入src/apps.json。运行时 app-files.ts 从apps.json中按键名即目录名如react-typescript-chartjs-...取出对应的文件树再注入动态生成的.env.local节点。可以推断在apps/下新增一个模板目录并让stats.json的组合矩阵指向它就能让 Vizard 支持新的技术栈组合——这是扩展 Vizard 的主要方式。常见问题与排查思路预览空白或报错优先检查.env.local中VITE_CUBE_API_URL是否以/cubejs-api/v1结尾、Token 是否有效、VITE_CUBE_QUERY是否是合法 JSON可以在.env.local中先写{}测试连通性。同时确认通过yarn dev启动过prepare已生成apps.json与预览产物。修改模板后看不到变化由于prepare是前置步骤请重新执行yarn dev或yarn build如果是开发调试建议先手动执行一次yarn prepare再启动 Vite。hash 无法解析Vizard 从location.hash读取参数并解码若手动改动过 URL 导致 base64 损坏会抛出Invalid params此时清空 URL hash 重新加载即可会回退到.env.local的默认值。跨源隔离相关报错Monaco 的 Worker 依赖 COEP/COOP 头请保持 vite.config.ts 中的响应头配置不要在反向代理层移除它们。小结Vizard 以极简的四行环境变量作为输入把生成示例应用代码与真实数据实时预览两件事无缝衔接在一起参数经 URL hash 在主应用与模板应用之间传递选项经组合矩阵校验保证技术栈组合始终可用模板经convert-apps.js自动收集并可自由扩展。对开发者而言它既是一个快速产出 Cube 前端 Demo 的工具也是一个配置驱动代码生成 iframe 实时预览模式的完整参考实现——相关源码均可从 vizard 目录 开始阅读入口依次是 Vizard.tsx、Setup.tsx、app-files.ts 与 Preview.tsx。赞分享后端数据分析数据可视化数据库【免费下载链接】cube Cube Core is open-source semantic layer for AI, BI and embedded analytics项目地址https://gitcode.com/gh_mirrors/cu/cube点击查看免费下载相关推荐Cube-UI 图片预览组件 ImagePreview 使用指南Cube UI 图片预览组件 ImagePreview 使用指南 什么是 ImagePreview 组件 ImagePreview 是 Cube UI 提供的一前端UI组件移动开发Cube CLIcube用 Rust 单二进制命令行管理 Cube Cloud 的完整实战指南Cube CLI cube 用 Rust 单二进制命令行管理 Cube Cloud 的完整实战指南 Cube CLI cube 是 Cube 开源仓库后端数据分析数据可视化数据库WrenAI 如何定义 cube 预聚合指标并用 wren cube query 执行结构化查询WrenAI 如何定义 cube 预聚合指标并用 wren cube query 执行结构化查询 在 WrenAI 项目中当你希望把月度收入订单量这类后端人工智能AI Agent数据分析上一篇terminal-notifier终极指南如何在macOS上自定义应用图标和内容图片显示下一篇突破语音识别瓶颈Vosk-api准确率测试全攻略与实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考