Redis Insight RedisTimeseries 插件实战指南为 Workbench 构建 RedisTimeSeries 图表可视化【免费下载链接】RedisInsightRedis GUI by Redis项目地址: https://gitcode.com/GitHub_Trending/re/RedisInsightRedis Insight 的 Workbench 支持通过自定义插件扩展命令结果的展示形式。redistimeseries-app正是这样一个官方示例级插件它用 React、TypeScript 与 Elastic UI 构建将TS.RANGE、TS.REVRANGE、TS.MRANGE、TS.MREVRANGE等 RedisTimeSeries 模块命令的原始返回渲染成交互式图表折线 / 散点、双 Y 轴、缩放联动、配置持久化。读完本文你将掌握该插件的完整目录结构、本地开发与构建流程、插件清单package.json的字段语义、渲染入口的响应解析逻辑以及如何将构建产物安装到 Redis Insight 的plugins目录中投入使用。插件定位Redis 数据可视化的扩展入口Redis 可以承载多种数据类型把它们的命令结果可视化是调试与验证的关键诉求。Redis Insight 通过 插件机制 允许独立扩展核心功能每个插件针对特定 Redis 命令在 Workbench 结果区渲染自定义可视化。redistimeseries-app是针对 RedisTimeSeries 模块的官方示例插件其清单中通过matchCommands声明了它服务的命令集合visualizations: [ { id: redistimeseries-chart, name: Chart, activationMethod: renderChart, matchCommands: [TS.MRANGE, TS.MREVRANGE, TS.RANGE, TS.REVRANGE], description: Redistimeseries chart view, default: true } ]这意味着只要在 Workbench 中执行上述四条命令之一插件就会被激活将命令结果以图表形式呈现default: true表示无需手动切换图表视图即为默认展示方式。插件目录结构仓库中的插件源码位于redisinsight/ui/src/packages/redistimeseries-app/典型结构如下redistimeseries-app/ ├── README.md # 插件说明与开发/构建命令 ├── index.html # iframe 内插件页面的 HTML 骨架 ├── package.json # 插件清单manifest ├── global.d.ts # 全局类型声明 ├── jest.config.js # 单元测试配置 ├── mockData/ │ └── resultTimeSeries.json # 本地开发用的 TS.RANGE 模拟响应 └── src/ ├── main.tsx # 渲染入口导出 renderChart ├── App.tsx # 响应解析与状态分支 ├── response.ts ├── styles/styles.scss └── components/Chart/ ├── Chart.tsx # 基于 Plotly 的图表渲染 ├── ChartConfigForm.tsx# 图表配置表单 ├── ChartResultView.tsx# 视图装配与配置状态管理 ├── constants.ts # 长度/导出/自动更新等常量 ├── interfaces.ts # 类型与枚举定义 ├── utils.ts # 配色、时间单位归一化等工具 ├── utils.test.ts └── ...本地开发运行插件插件 README 给出的本地启动流程非常简单npm install npm startnpm install安装依赖npm start启动本地服务器以便在浏览器中调试插件。需要说明的是README 描述该项目使用 Parcel 构建而当前仓库的package.json中dev脚本为vite -c ../vite.config.mjs即实际构建链已演进为 Vite。以仓库现有内容为准本地开发时执行npm run dev即可通过 Vite 起服务。关于基础样式README 特别注明“Base styles are included toindex.htmlfrom the repository”即插件页面需要引入 Redis Insight 核心应用的基础样式含字体与主题。index.html中通过条件注释在开发模式下加载全局样式表生产环境则依赖运行时注入。当插件正式部署到应用内后其 iframe 会自动获得 Redis Insight 的基础样式字体与配色详见 插件开发文档。插件本地开发还内置了演示数据src/main.tsx中当NODE_ENV development时会用一条模拟命令TS.RANGE bike_sales_3_per_day - FILTER_BY_VALUE 3000 5000和 mockData/resultTimeSeries.json 渲染图表让你无需真实 Redis 实例即可预览效果。模拟数据格式与真实TS.RANGE返回一致——外层是{ status, response }response为[timestamp, value]数组[ { status: success, response: [ [1643846400000, 4604.83], [1644019200000, 3924.99], [1644364800000, 4653.02], [1644624000000, 4171.72] ] } ]生成基础静态资源vendor 目录为了让插件在视觉上与核心应用一致需要把应用的样式与字体拷贝到插件目录中。README 提供了两条命令npm run build:statics # 适用于 Linux 或 macOS npm run build:statics:win # 适用于 Windows该命令会生成vendor文件夹内含核心应用的样式与字体需将其放置到你的插件文件夹内并在index.html中引入对应样式文件。这一步是“让插件融入应用观感”的关键环节。构建与安装插件到 Redis Insight构建产物README 给出的正式构建流程npm install npm run build构建后会在插件目录生成dist文件夹核心脚本index.js与样式styles.css这些产物即可交付给 Redis Insight 使用。安装步骤根据 插件安装文档安装分为三步下载插件此处即使用npm run build产出的package.json与dist文件夹打开 Redis Insight 的plugins目录macOSusersHomeDir/.redis-insight/pluginsWindowsC:/Users/{Username}/.redis-insight/pluginsLinuxusersHomeDir/.redis-insight/plugins将包含package.json与dist的插件文件夹放入plugins目录。安装完成后重新加载 Workbench 页面并执行与该插件可视化匹配的 Redis 命令如TS.RANGE即可看到图表视图。官方文档特别提醒添加 Workbench 插件时只应使用可信来源的文件避免恶意代码被自动执行。插件清单详解package.json 的关键字段redistimeseries-app/package.json是插件的必需清单结合 开发文档 可以总结出以下字段语义字段必填说明name是插件名建议与文件夹名一致此处为redistimeseriesmain是核心脚本相对路径如./dist/index.jsvisualizations是可视化对象数组每项含id、name、activationMethod、matchCommands支持正则如[CLIENT LIST, FT.*]可选defaultstyles否样式文件路径若指定会注入插件 iframeversion/description/author否元信息本插件声明了唯一一个可视化redistimeseries-chart名为 “Chart”激活函数为renderChart。其依赖栈颇具参考价值elastic/eui34.6.0UI 组件库、plotly.js-dist-min图表引擎、date-fns时间格式化、file-saver导出文件、fscreen全屏、redisinsight-plugin-sdk与主应用通信的本地 SDK 包。渲染入口与响应解析插件核心脚本必须导出可视化激活函数。src/main.tsx中的renderChart将主应用传入的{ command, data, initialPreferences }装配进 React 组件树并挂载到 iframe 的#appDOM 节点const renderChart (props: Props) { const { command , data: result [], initialPreferences } props render( ThemeProvider App command{command} result{result} initialPreferences{initialPreferences} / /ThemeProvider, document.getElementById(app), ) } export default { renderChart }激活函数收到的data是命令执行结果数组Standalone 模式下为一个元素每项形如{ response, status: success | fail }。App.tsx进一步做了两层处理失败与字符串响应兜底status fail或response为字符串时直接展示原始文本避免图表组件崩溃按命令类型解析响应TS.RANGE/TS.REVRANGE返回单序列[timestamp, value][]被包装成[{ key, datapoints }]而TS.MRANGE/TS.MREVRANGE返回多序列结构按[key, labels, datapoints]映射展开if ([TsCmdRangePrefix.RANGE, TsCmdRangePrefix.REVRANGE].includes(cmd.toUpperCase())) { return [{ key, datapoints: data }] } return data.map((e: any[]) ({ key: e[0], labels: e[1], datapoints: e[2] }))这与 RedisTimeSeries 模块的实际返回结构完全对应是理解插件数据流的关键。图表能力深度解析Plotly 渲染与主题适配Chart.tsx 使用plotly.js-dist-min的Plotly.newPlot渲染图表并监听plotly_hover十字联动、plotly_relayout拖拽缩放与plotly_doubleclick双击复位事件。插件会读取document.body上的theme_DARK/theme_LIGHT类名判断应用主题进而选择暗色/亮色调色板与坐标轴颜色。可配置项interfaces.ts 定义了完整配置模型核心枚举与结构如下export enum TimeUnit { seconds seconds, milliseconds milliseconds } export enum GraphMode { line line, points points } export enum AxisScale { linear linear, log log } export interface ChartConfig { mode: GraphMode // 折线 / 散点 timeUnit: TimeUnit // 时间戳单位影响 X 轴归一化 xlabel: string title: string staircase: boolean // 阶梯线line.shape: hv fill: boolean // 面积填充tozeroy 30% 透明度 yAxis2: boolean // 是否启用右侧 Y 轴 keyToY2Axis: { [keyName: string]: boolean } // 各序列归属左/右 Y 轴 yAxisConfig: YAxisConfig // 左轴标签与刻度类型 yAxis2Config: YAxisConfig // 右轴标签与刻度类型 }配置表单位于 ChartConfigForm.tsx顶部快捷区提供 GraphMode / TimeUnit 切换、Staircase 与 Fill 开关折叠的 “More options” 区域则提供标题≤60 字符、X 轴标签≤60 字符、右 Y 轴开关与各序列轴归属、左右轴标签≤30 字符与刻度类型linear/log具体限制见 constants.ts。时间单位归一化与默认配色utils.ts 提供两项核心逻辑normalizeDatapointUnits当选择seconds时将时间戳乘以 1000 统一为毫秒保证 X 轴时间格式化yyyy-MM-dd HH:mm:ss.SSS正确determineDefaultTimeUnits根据首个数据点时间戳是否大于1e10自动推断默认单位是毫秒还是秒ColorPicker按序列 key 的字符码哈希取色并缓存确保同一序列在多次渲染间颜色稳定暗色与亮色各提供 10 组配色。配置持久化ChartResultView.tsx 通过redisinsight-plugin-sdk的setState将mode、timeUnit、staircase、fill四个控件持久化下次打开同一可视化时自动恢复用户偏好initialPreferences回填。缩放状态由LAYOUT_STATE管理拖拽缩放后提示 “Double click on the graph to reset the view”双击复位后恢复 “Drag over the part of the chart to zoom into it”。运行时环境与插件通信插件在 Workbench 中以 iframe 形式渲染用于隔离脚本与样式。iframe 内可通过window.state获取附加信息const { config, modules } window.state const { baseUrl, appVersion } config // modules - 当前数据库启用的模块列表 // baseUrl - 插件文件夹 URL可用于引用插件内的静态资源 // appVersion- Redis Insight 应用版本与主应用的深层通信如持久化、事件收发建议使用redisinsight-plugin-sdk本插件以file:../redisinsight-plugin-sdk本地依赖方式引用。完整的方法列表可参考 插件 SDK README。小结redistimeseries-app是一个结构完整、可直接运行的 Redis Insight Workbench 可视化插件示例完整展示了从“清单声明 → 本地开发 → 静态资源生成 → 构建安装”的插件生命周期并以 Plotly 为引擎实现了具备缩放联动、双 Y 轴、主题适配与配置持久化的时序图表。无论你是想直接复用该图表能力还是借鉴其结构开发自己的命令可视化插件本文提到的 插件安装文档、插件开发文档 与 插件机制介绍 都值得进一步阅读。【免费下载链接】RedisInsightRedis GUI by Redis项目地址: https://gitcode.com/GitHub_Trending/re/RedisInsight创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考