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