后端數(shù)據(jù)分析數(shù)據(jù)可視化數(shù)據(jù)庫【免費(fèi)下載鏈接】cube Cube Core is open-source semantic layer for AI, BI and embedded analytics項(xiàng)目地址https://gitcode.com/gh_mirrors/cu/cube點(diǎn)擊查看免費(fèi)下載Vizard 是 Cube 開源倉庫Cube Core 語義層內(nèi)置在 Playground 中的一個(gè)獨(dú)立 Web 應(yīng)用你只需提供 Cube API 地址、Token、查詢語句Query和透視配置Pivot Config它就會(huì)自動(dòng)為你挑選出適配的框架、語言與圖表庫生成一份可直接運(yùn)行的示例應(yīng)用源碼并通過 iframe 提供真實(shí)數(shù)據(jù)驅(qū)動(dòng)的實(shí)時(shí)預(yù)覽。讀完本文你將掌握 Vizard 的完整配置方式、運(yùn)行與構(gòu)建流程、參數(shù)校驗(yàn)機(jī)制以及從源碼層面理解代碼生成 實(shí)時(shí)預(yù)覽這一整套工作鏈路從而快速搭建你自己的 Cube 前端可視化 Demo 或基于該模式擴(kuò)展新的模板應(yīng)用。Vizard 是什么Cube 生態(tài)中的示例應(yīng)用生成器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 是一個(gè)按需生成前端示例代碼的 Web 應(yīng)用它把Cube API 參數(shù)API URL、Token、查詢、透視配置作為輸入把可運(yùn)行的示例應(yīng)用源碼作為輸出并且輸出之后還能直接以 live preview 的形式在瀏覽器里看到真實(shí)數(shù)據(jù)渲染的圖表。從倉庫結(jié)構(gòu)看Vizard 位于 packages/cubejs-playground/vizard 目錄與 Playground數(shù)據(jù)模型 IDE 與查詢工作臺(tái)同屬于 cubejs-playground 包但它是獨(dú)立運(yùn)行的 Vite React 應(yīng)用包名為vizard-preview見 package.json不依賴 Playground 本體即可啟動(dòng)。其核心能力可以拆成三個(gè)層面參數(shù)輸入層讀取.env.local中的 Cube API 參數(shù)選項(xiàng)組合層按可視化類型 → 框架 → 語言 → 圖表庫的層級(jí)關(guān)系篩選出可用的技術(shù)棧組合見 app-options.js代碼生成與預(yù)覽層依據(jù)組合結(jié)果選擇模板應(yīng)用文件樹動(dòng)態(tài)注入.env.local配置并在右側(cè) iframe 中渲染真實(shí)圖表見 app-files.ts 與 Preview.tsx。快速上手四個(gè)環(huán)境變量搞定參數(shù)注入Vizard 使用 Vite 構(gòu)建所有 Cube API 參數(shù)都通過環(huán)境變量注入。在項(xiàng)目根目錄即packages/cubejs-playground/vizard創(chuàng)建.env.local文件并填入以下內(nèi)容完整示例見 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}各變量的含義與格式如下環(huán)境變量說明格式要求VITE_CUBE_API_URLCube API 的 REST 端點(diǎn)地址https://{域名或 IP}/cubejs-api/v1VITE_CUBE_API_TOKEN訪問 Cube API 所需的認(rèn)證令牌字符串由 Cube 生成VITE_CUBE_QUERY需要執(zhí)行的 Cube 查詢JSON 字符串如{measures:[Orders.count],dimensions:[Orders.status]}VITE_CUBE_PIVOT_CONFIG控制查詢結(jié)果如何透視行列轉(zhuǎn)換的配置JSON 字符串如{x:[Orders.status],y:[measures]}這些變量之所以帶有VITE_前綴是因?yàn)?Vite 只會(huì)在構(gòu)建期把import.meta.env.VITE_*暴露給前端代碼。Vizard 在啟動(dòng)時(shí)會(huì)將這四個(gè)變量序列化進(jìn)頁面 URL 的 hash 中見下文參數(shù)如何流轉(zhuǎn)一節(jié)因此即使之后修改了查詢也可以不重新構(gòu)建、僅通過 URL hash 覆蓋默認(rèn)參數(shù)。關(guān)于 API URL 的路徑約定VITE_CUBE_API_URL需要指向 Cube API 的/cubejs-api/v1前綴。例如本地開發(fā)時(shí)通常填寫http://localhost:4000/cubejs-api/v1Cube Core 默認(rèn)端口為 4000。Vizard 生成的示例應(yīng)用會(huì)把這個(gè)地址連同 Token 一起寫入它自己的.env.local確保示例代碼 clone 后開箱即用。開發(fā) / 構(gòu)建 / 預(yù)覽三條命令的完整閉環(huán)README 給出了三個(gè)標(biāo)準(zhǔn)命令它們分別對(duì)應(yīng) package.json 中的 scripts$ yarn dev # 本地開發(fā)等價(jià)于 yarn prepare vite $ yarn build # 生產(chǎn)構(gòu)建等價(jià)于 yarn prepare tsc vite build $ yarn preview # 本地預(yù)覽生產(chǎn)構(gòu)建產(chǎn)物等價(jià)于 vite preview值得注意的是dev與build前面都有一個(gè)prepare步驟node ./convert-apps.js node ./build-apps.js這意味著convert-apps.js把a(bǔ)pps/目錄下的模板應(yīng)用遞歸讀取、按.gitignore規(guī)則過濾輸出為src/apps.json詳見下文模板應(yīng)用如何變成可注入的文件樹build-apps.js負(fù)責(zé)把各模板應(yīng)用單獨(dú)構(gòu)建成可供 iframe 預(yù)覽的靜態(tài)頁面。因此任何時(shí)候修改了apps/下的模板都必須重新運(yùn)行yarn dev或yarn build讓prepare重新生成apps.json與預(yù)覽產(chǎn)物否則改動(dòng)不會(huì)生效。vite.config.ts查看中還做了幾項(xiàng)對(duì)運(yùn)行有影響的配置base: /vizard/所有靜態(tài)資源路徑都以/vizard/為基準(zhǔn)Preview iframe 的地址也是/vizard/preview/{appName}/index.html手動(dòng)分塊manualChunks把react、monaco-editor、cubejs-client/*等拆分為獨(dú)立 chunk優(yōu)化首屏加載開發(fā)與預(yù)覽服務(wù)器統(tǒng)一設(shè)置Cross-Origin-Embedder-Policy: require-corp與Cross-Origin-Opener-Policy: same-origin響應(yīng)頭這是 Monaco Editor 的 Web Worker 正常加載所必需的跨源隔離配置。技術(shù)棧選項(xiàng)五類圖表 × 三大框架 × 兩種語言 × 兩種庫Vizard 的核心交互是讓用戶通過右側(cè)面板Setup.tsx自由組合技術(shù)棧。全部可選值定義在 app-options.jsexport const APP_OPTIONS { visualization: [line, bar, area, pie, doughnut, table], framework: [react, angular, vue], language: [typescript, javascript], library: [chartjs, antd], };與之對(duì)應(yīng)的展示名稱與圖標(biāo)Line/Bar/Area/Pie/Donut 等映射在 options.tsx例如選項(xiàng)值顯示名稱類型line/bar/area/pie/doughnutLine / Bar / Area / Pie / DonutvisualizationtableTablevisualizationreact/angular/vueReact / Angular / Vueframeworktypescript/javascriptTypeScript / JavaScriptlanguagechartjsChart.jslibraryantdAnt Designlibrary這些類型在 types.ts 中體現(xiàn)為VisualType、FrameworkType、LanguageType、LibraryType等聯(lián)合類型并組合出VisualParamsvisualization framework language library四元組ConnectionParamsuseWebSockets與useSubscription兩個(gè)布爾開關(guān)AllParamsVisualParams ConnectionParamsChartTypearea | bar | doughnut | line | pie | table最終傳給模板應(yīng)用的圖表類型。選項(xiàng)間的依賴校驗(yàn)stats.json 組合矩陣不是所有組合都有效——例如 Angular Chart.js 可能就不可用。Vizard 通過構(gòu)建期生成的stats.json即VIZARD_PARAMS_MAP維護(hù)了一張層級(jí)組合矩陣visualization → framework → language → library核心校驗(yàn)邏輯在 helpers.tsvalidateVisualParams(params)按優(yōu)先級(jí)逐級(jí)校驗(yàn)四個(gè)參數(shù)。如果某個(gè)層級(jí)的值缺失或不在矩陣中就自動(dòng)回退到該層級(jí)第一個(gè)可用選項(xiàng)保證任何時(shí)候都返回一個(gè)合法的VisualParams四元組getAvailableOptions(params)根據(jù)當(dāng)前已選的前 N 個(gè)維度過濾出下一維度的可用選項(xiàng)讓 UI 只展示可行的組合。這套機(jī)制在 Setup.tsx 中被實(shí)時(shí)調(diào)用每當(dāng)用戶在表單里改動(dòng) visualization / framework / language / library 中的任意一項(xiàng)都會(huì)重新校驗(yàn)并刷新可用選項(xiàng)如果當(dāng)前組合沒有任何圖表庫支持面板會(huì)給出提示 This combination of options supports no charting library yet.見 Setup.tsx。默認(rèn)狀態(tài)下Vizard 使用visualization: line作為初始值見 Vizard.tsx其余維度由校驗(yàn)邏輯自動(dòng)推導(dǎo)。參數(shù)如何流轉(zhuǎn)env → URL hash → 預(yù)覽理解 Vizard 內(nèi)部的數(shù)據(jù)流是讀懂它改參數(shù)即可實(shí)時(shí)更新預(yù)覽的關(guān)鍵。整條鏈路如下啟動(dòng)時(shí)寫 hash如果 URL 上沒有 hashVizard.tsx 會(huì)把.env.local中的apiUrl、apiToken、query、pivotConfig序列化為 JSON再btoaencodeURIComponent編碼后寫入location.hash運(yùn)行時(shí)讀 hashVizard 啟動(dòng)時(shí)從location.hash解碼出VizardProps{ apiUrl, apiToken, query, pivotConfig }并以此為唯一數(shù)據(jù)源見 Vizard.tsx。如果 hash 非法會(huì)拋出Invalid params錯(cuò)誤組裝 Config把 hash 參數(shù)與用戶在面板中選定的chartType、useWebSockets、useSubscription合并為Config對(duì)象見 Vizard.tsx計(jì)算應(yīng)用名useAppName依據(jù)四元組從VIZARD_PARAMS_MAP中查出對(duì)應(yīng)的模板應(yīng)用名見 app-name.ts任何一層組合非法都會(huì)拋出對(duì)應(yīng)錯(cuò)誤生成文件樹useAppFiles從apps.json取出該模板的完整文件樹并動(dòng)態(tài)生成一個(gè).env.local文件節(jié)點(diǎn)內(nèi)容為見 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多了三個(gè)變量VITE_CHART_TYPE、VITE_CUBE_API_USE_WEBSOCKETS、VITE_CUBE_API_USE_SUBSCRIPTION——它們是模板應(yīng)用運(yùn)行時(shí)需要的 6.實(shí)時(shí)預(yù)覽Preview組件把整個(gè)Config再次編碼進(jìn) URL hash拼出 iframe 地址/vizard/preview/{appName}/index.html#{hash}并在參數(shù)變化時(shí)重新加載 iframe見 Preview.tsx。這就是改選項(xiàng) → 預(yù)覽立即更新的實(shí)現(xiàn)原理。模板應(yīng)用端如何消費(fèi)這些參數(shù)以倉庫內(nèi)置的 Chart.js 模板 react-typescript-chartjs-areabardoughnutlinepie 為例它在App.tsx中用extractHashConfig見 config.ts從自身 URL hash 中解碼 Config覆蓋.env.local提供的默認(rèn)值——hash 的優(yōu)先級(jí)最高這正是 Vizard 主應(yīng)用注入?yún)?shù)的通道若useWebSockets為真則創(chuàng)建WebSocketTransport({ authorization: apiToken, apiUrl })作為 Cube API 的傳輸層否則走默認(rèn) REST 傳輸通過cube(apiToken, { apiUrl, transport })創(chuàng)建客戶端實(shí)例包進(jìn)CubeProvider用QueryRenderer查看調(diào)用useCubeQuery(query, { subscribe })渲染 Loading / Error / 數(shù)據(jù)三種狀態(tài)數(shù)據(jù)到達(dá)后交給ChartViewerChart.js 版通過resultSet.chartPivot(pivotConfig)生成 labels、resultSet.series(pivotConfig)生成 datasets再根據(jù)chartType選擇Line / Bar / Pie / Doughnut組件見 ChartViewer.tsxAnt Design 表格版則用resultSet.tableColumns()生成列、resultSet.tablePivot(pivotConfig)生成行數(shù)據(jù)渲染Table見 ChartViewer.tsx。這就是你的 Cube API 參數(shù) 你選的技術(shù)棧 → 真實(shí)可運(yùn)行代碼 → 真實(shí)數(shù)據(jù)圖表的完整閉環(huán)。代碼瀏覽與下載生成結(jié)果的三種交付方式在 Code 標(biāo)簽頁CodeViewer.tsx中Vizard 將生成的文件樹渲染為一個(gè)可折疊的左側(cè)文件列表目錄圖標(biāo) 文件圖標(biāo)按路徑縮進(jìn)點(diǎn)擊文件即打開編輯區(qū)編輯區(qū)使用Monaco Editor只讀模式主題cube見 Editor.tsx進(jìn)行語法高亮展示。底部工具欄提供了三種交付方式Source 按鈕點(diǎn)擊下載整個(gè)模板應(yīng)用的源碼./download/{appName}.zip即一份完整可獨(dú)立運(yùn)行的工程Config 按鈕僅下載動(dòng)態(tài)生成的.env.local文件——把這份配置放進(jìn)任何克隆下來的模板工程根目錄即可連上你的 Cube API下載邏輯見 download-file.ts通過 Blob a download觸發(fā)瀏覽器下載Docs 按鈕跳轉(zhuǎn)到 Vizard 的官方文檔頁面在 CodeViewer.tsx 中配置。模板應(yīng)用機(jī)制新示例代碼如何被納入Vizard 的示例代碼并非寫死在前端而是由apps/目錄下的模板應(yīng)用在構(gòu)建期自動(dòng)收集。目前倉庫內(nèi)置了兩個(gè)模板見 apps 目錄react-typescript-chartjs-areabardoughnutlinepieReact TypeScript Chart.js覆蓋五種圖表類型react-typescript-antd-tableReact TypeScript Ant Design Table。convert-apps.js查看的處理邏輯是遍歷apps/下每個(gè)子目錄若存在.vizardignore文件則整體跳過解析模板自身的.gitignore并強(qiáng)制忽略.gitignore本身用minimatch做路徑匹配過濾掉應(yīng)忽略的文件如node_modules、構(gòu)建產(chǎn)物遞歸讀取剩余文件構(gòu)造{ name: { file: { contents } } }/{ name: { directory: {...} } }形式的嵌套結(jié)構(gòu)最終寫入src/apps.json。運(yùn)行時(shí) app-files.ts 從apps.json中按鍵名即目錄名如react-typescript-chartjs-...取出對(duì)應(yīng)的文件樹再注入動(dòng)態(tài)生成的.env.local節(jié)點(diǎn)。可以推斷在apps/下新增一個(gè)模板目錄并讓stats.json的組合矩陣指向它就能讓 Vizard 支持新的技術(shù)棧組合——這是擴(kuò)展 Vizard 的主要方式。常見問題與排查思路預(yù)覽空白或報(bào)錯(cuò)優(yōu)先檢查.env.local中VITE_CUBE_API_URL是否以/cubejs-api/v1結(jié)尾、Token 是否有效、VITE_CUBE_QUERY是否是合法 JSON可以在.env.local中先寫{}測試連通性。同時(shí)確認(rèn)通過yarn dev啟動(dòng)過prepare已生成apps.json與預(yù)覽產(chǎn)物。修改模板后看不到變化由于prepare是前置步驟請重新執(zhí)行yarn dev或yarn build如果是開發(fā)調(diào)試建議先手動(dòng)執(zhí)行一次yarn prepare再啟動(dòng) Vite。hash 無法解析Vizard 從location.hash讀取參數(shù)并解碼若手動(dòng)改動(dòng)過 URL 導(dǎo)致 base64 損壞會(huì)拋出Invalid params此時(shí)清空 URL hash 重新加載即可會(huì)回退到.env.local的默認(rèn)值?？缭锤綦x相關(guān)報(bào)錯(cuò)Monaco 的 Worker 依賴 COEP/COOP 頭請保持 vite.config.ts 中的響應(yīng)頭配置不要在反向代理層移除它們。小結(jié)Vizard 以極簡的四行環(huán)境變量作為輸入把生成示例應(yīng)用代碼與真實(shí)數(shù)據(jù)實(shí)時(shí)預(yù)覽兩件事無縫銜接在一起參數(shù)經(jīng) URL hash 在主應(yīng)用與模板應(yīng)用之間傳遞選項(xiàng)經(jīng)組合矩陣校驗(yàn)保證技術(shù)棧組合始終可用模板經(jīng)convert-apps.js自動(dòng)收集并可自由擴(kuò)展。對(duì)開發(fā)者而言它既是一個(gè)快速產(chǎn)出 Cube 前端 Demo 的工具也是一個(gè)配置驅(qū)動(dòng)代碼生成 iframe 實(shí)時(shí)預(yù)覽模式的完整參考實(shí)現(xiàn)——相關(guān)源碼均可從 vizard 目錄 開始閱讀入口依次是 Vizard.tsx、Setup.tsx、app-files.ts 與 Preview.tsx。贊分享后端數(shù)據(jù)分析數(shù)據(jù)可視化數(shù)據(jù)庫【免費(fèi)下載鏈接】cube Cube Core is open-source semantic layer for AI, BI and embedded analytics項(xiàng)目地址https://gitcode.com/gh_mirrors/cu/cube點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Cube-UI 圖片預(yù)覽組件 ImagePreview 使用指南Cube UI 圖片預(yù)覽組件 ImagePreview 使用指南 什么是 ImagePreview 組件 ImagePreview 是 Cube UI 提供的一前端UI組件移動(dòng)開發(fā)Cube CLIcube用 Rust 單二進(jìn)制命令行管理 Cube Cloud 的完整實(shí)戰(zhàn)指南Cube CLI cube 用 Rust 單二進(jìn)制命令行管理 Cube Cloud 的完整實(shí)戰(zhàn)指南 Cube CLI cube 是 Cube 開源倉庫后端數(shù)據(jù)分析數(shù)據(jù)可視化數(shù)據(jù)庫WrenAI 如何定義 cube 預(yù)聚合指標(biāo)并用 wren cube query 執(zhí)行結(jié)構(gòu)化查詢WrenAI 如何定義 cube 預(yù)聚合指標(biāo)并用 wren cube query 執(zhí)行結(jié)構(gòu)化查詢 在 WrenAI 項(xiàng)目中當(dāng)你希望把月度收入訂單量這類后端人工智能AI Agent數(shù)據(jù)分析上一篇terminal-notifier終極指南如何在macOS上自定義應(yīng)用圖標(biāo)和內(nèi)容圖片顯示下一篇突破語音識(shí)別瓶頸Vosk-api準(zhǔn)確率測試全攻略與實(shí)戰(zhàn)指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考