# influxDB-cleint

**Repository Path**: Gulu_Lv/influx-db-cleint

## Basic Information

- **Project Name**: influxDB-cleint
- **Description**: InfluxDB Client 是一款基于 Electron、Vue.js 和 Node.js 构建的跨平台桌面应用程序，为管理和查询 InfluxDB 数据库提供了直观的界面。它简化了数据库操作、数据可视化和查询管理，使开发人员和数据分析师更容易处理时间序列数据。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-09-10
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Electron, influxdb

## README

# InfluxDB Client

<div align="center">
  <h3>A powerful desktop application for managing InfluxDB databases</h3>
  <h3>一款功能强大的 InfluxDB 数据库管理桌面应用</h3>
  <p>
    <a href="https://gitee.com/Gulu_Lv/influx-db-cleint">
      <img src="https://img.shields.io/badge/Gitee-Repository-red?style=flat-square&logo=gitee" alt="Gitee">
    </a>
    <a href="https://github.com/influxdata/influxdb">
      <img src="https://img.shields.io/badge/InfluxDB-Supported-blue?style=flat-square&logo=influxdb" alt="InfluxDB">
    </a>
    <img src="https://img.shields.io/badge/License-MIT-green?style=flat-square" alt="License">
    <img src="https://img.shields.io/badge/Version-1.0.0-brightgreen?style=flat-square" alt="Version">
  </p>
</div>

English | [中文](#中文文档)

## Overview

InfluxDB Client is a cross-platform desktop application built with Electron, Vue.js, and Node.js that provides an intuitive interface for managing and querying InfluxDB databases. It simplifies database operations, data visualization, and query management, making it easier for developers and data analysts to work with time-series data.

## ✨ Features

- 🔌 **Connection Management** - Manage multiple InfluxDB connections with secure credential storage
- 📊 **Database Explorer** - Browse databases, measurements, and data with advanced filtering and time range selection
- ✍️ **Query Editor** - Write and execute InfluxQL queries with syntax highlighting and query history
- 📈 **Data Visualization** - Create interactive charts (line, bar, area, scatter) from query results
- 💾 **Data Export** - Export query results in CSV or JSON format
- 🕐 **Time Range Filtering** - Filter data by custom time ranges with date/time pickers
- 🌍 **Internationalization** - Full support for English and Chinese languages
- 🎨 **Modern UI** - Clean and responsive interface built with Element UI
- 🗄️ **Database Management** - Create and delete databases and measurements directly from the UI

## 🖼️ Screenshots

| Connection Manager | Database Explorer |
|-------------------|-------------------|
| Manage multiple InfluxDB connections | Browse and explore your data |

| Query Editor | Data Visualization |
|--------------|-------------------|
| Execute InfluxQL queries with syntax highlighting | Visualize data with interactive charts |

## 🛠️ Tech Stack

- **Frontend Framework:** Vue.js 2.6 + Vue Router + Vuex
- **UI Components:** Element UI
- **Desktop Framework:** Electron
- **Runtime:** Node.js 18
- **Charts Library:** ECharts
- **Code Editor:** CodeMirror
- **InfluxDB Client:** @influxdata/influxdb-client
- **Build Tool:** Electron Builder
- **Internationalization:** Vue I18n

## 📦 Installation

### Prerequisites

- Node.js 18 or higher
- npm or yarn package manager
- InfluxDB 1.x or 2.x server

### Download Release

Download the latest release for your platform from the [Releases](https://gitee.com/Gulu_Lv/influx-db-cleint/releases) page.

### Build from Source

```bash
# Clone the repository
git clone https://gitee.com/Gulu_Lv/influx-db-cleint.git
cd influx-db-cleint

# Install dependencies
npm install

# Run in development mode
npm run electron:serve

# Build for production
npm run electron:build
```

## 📖 Usage

### 1. Connect to InfluxDB

1. Launch the application
2. Click "New Connection" in the Connection Manager
3. Enter your InfluxDB connection details:
   - **Name:** A friendly name for the connection
   - **URL:** InfluxDB server URL (e.g., http://localhost:8086)
   - **Username/Password:** (Optional) For InfluxDB 1.x authentication
   - **Token:** (Optional) For InfluxDB 2.x authentication
4. Click "Test Connection" to verify
5. Click "Save" to save the connection

### 2. Explore Databases

1. Select a connection and click "Connect"
2. Navigate to "Database Explorer" from the sidebar
3. Select a database from the left panel
4. Choose a measurement to view its data
5. Use time range filters to narrow down results:
   - Set start and end times
   - Adjust the data limit
   - Click "Apply Filter" to update the view
6. Export data or visualize it directly

### 3. Execute Queries

1. Go to "Query Editor" from the sidebar
2. Write your InfluxQL query in the editor
3. Click "Execute" to run the query
4. View results in the table below
5. Access query history for previously executed queries
6. Export results or create visualizations

### 4. Create Visualizations

1. Execute a query or select data from the explorer
2. Click "Visualize" to open the visualization page
3. Choose chart type (Line, Bar, Area, Scatter)
4. Configure axes and grouping options
5. Export chart as an image

### 5. Manage Databases

1. In Database Explorer, right-click on a database to delete it
2. Click the "+" button to create a new database
3. Select a measurement and click "Delete" to remove it

### 6. Settings

1. Navigate to "Settings" from the sidebar
2. Choose your preferred language (English/Chinese)
3. Settings are automatically saved

## 💻 Development

### Project Structure

```
influxdb-client/
├── src/
│   ├── background.js       # Electron main process
│   ├── App.vue             # Root Vue component
│   ├── main.js             # Vue app entry point
│   ├── router/            # Vue Router configuration
│   ├── store/              # Vuex state management
│   ├── views/              # Page components
│   │   ├── ConnectionManager.vue
│   │   ├── DatabaseExplorer.vue
│   │   ├── QueryEditor.vue
│   │   ├── DataVisualization.vue
│   │   ├── Settings.vue
│   │   └── About.vue
│   ├── components/         # Reusable components
│   ├── utils/              # Utility functions
│   │   ├── influxdb.js    # InfluxDB client service
│   │   └── storage.js     # Local storage service
│   ├── i18n/              # Internationalization
│   └── mixins/            # Vue mixins
├── public/                # Static assets
└── package.json          # Project configuration
```

### Available Scripts

```bash
# Development
npm run electron:serve    # Run in development mode with hot reload
npm run serve            # Run web version only

# Production Build
npm run electron:build    # Build for current platform
npm run electron:build -- --mac    # Build for macOS
npm run electron:build -- --win    # Build for Windows
npm run electron:build -- --linux  # Build for Linux

# Code Quality
npm run lint             # Run ESLint
npm run lint:fix         # Fix ESLint issues
```

### Environment Setup

1. Clone the repository
2. Install dependencies: `npm install`
3. Start development server: `npm run electron:serve`
4. Make your changes
5. Test the application
6. Build for production: `npm run electron:build`

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🔗 Links

- **Project Repository:** [Gitee](https://gitee.com/Gulu_Lv/influx-db-cleint)
- **InfluxDB Documentation:** [Official Docs](https://docs.influxdata.com/influxdb/)
- **Issue Tracker:** [Report Issues](https://gitee.com/Gulu_Lv/influx-db-cleint/issues)
- **InfluxDB GitHub:** [InfluxDB](https://github.com/influxdata/influxdb)

---

# 中文文档

## 概述

InfluxDB Client 是一款基于 Electron、Vue.js 和 Node.js 构建的跨平台桌面应用程序，为管理和查询 InfluxDB 数据库提供了直观的界面。它简化了数据库操作、数据可视化和查询管理，使开发人员和数据分析师更容易处理时间序列数据。

## ✨ 功能特性

- 🔌 **连接管理** - 管理多个 InfluxDB 连接，安全存储凭据
- 📊 **数据库浏览器** - 使用高级筛选和时间范围选择功能浏览数据库、测量和数据
- ✍️ **查询编辑器** - 编写和执行带语法高亮和查询历史的 InfluxQL 查询
- 📈 **数据可视化** - 从查询结果创建交互式图表（折线图、柱状图、面积图、散点图）
- 💾 **数据导出** - 以 CSV 或 JSON 格式导出查询结果
- 🕐 **时间范围筛选** - 使用日期/时间选择器按自定义时间范围筛选数据
- 🌍 **国际化** - 完全支持中英文双语
- 🎨 **现代化界面** - 使用 Element UI 构建的简洁响应式界面
- 🗄️ **数据库管理** - 直接从界面创建和删除数据库及测量

## 🛠️ 技术栈

- **前端框架：** Vue.js 2.6 + Vue Router + Vuex
- **UI 组件库：** Element UI
- **桌面框架：** Electron
- **运行时：** Node.js 18
- **图表库：** ECharts
- **代码编辑器：** CodeMirror
- **InfluxDB 客户端：** @influxdata/influxdb-client
- **构建工具：** Electron Builder
- **国际化：** Vue I18n

## 📦 安装

### 环境要求

- Node.js 18 或更高版本
- npm 或 yarn 包管理器
- InfluxDB 1.x 或 2.x 服务器

### 下载发布版本

从 [Releases](https://gitee.com/Gulu_Lv/influx-db-cleint/releases) 页面下载适合您平台的最新版本。

### 从源码构建

```bash
# 克隆仓库
git clone https://gitee.com/Gulu_Lv/influx-db-cleint.git
cd influx-db-cleint

# 安装依赖
npm install

# 开发模式运行
npm run electron:serve

# 构建生产版本
npm run electron:build
```

## 📖 使用说明

### 1. 连接到 InfluxDB

1. 启动应用程序
2. 在连接管理器中点击"新建连接"
3. 输入 InfluxDB 连接详情：
   - **名称：** 连接的友好名称
   - **URL：** InfluxDB 服务器地址（例如：http://localhost:8086）
   - **用户名/密码：**（可选）用于 InfluxDB 1.x 认证
   - **令牌：**（可选）用于 InfluxDB 2.x 认证
4. 点击"测试连接"进行验证
5. 点击"保存"保存连接

### 2. 浏览数据库

1. 选择一个连接并点击"连接"
2. 从侧边栏导航到"数据库浏览器"
3. 从左侧面板选择数据库
4. 选择测量以查看其数据
5. 使用时间范围筛选器缩小结果范围：
   - 设置开始和结束时间
   - 调整数据限制
   - 点击"应用筛选"更新视图
6. 导出数据或直接可视化

### 3. 执行查询

1. 从侧边栏进入"查询编辑器"
2. 在编辑器中编写 InfluxQL 查询
3. 点击"执行"运行查询
4. 在下方表格中查看结果
5. 访问查询历史以查看之前执行的查询
6. 导出结果或创建可视化

### 4. 创建可视化

1. 执行查询或从浏览器选择数据
2. 点击"可视化"打开可视化页面
3. 选择图表类型（折线图、柱状图、面积图、散点图）
4. 配置坐标轴和分组选项
5. 将图表导出为图片

### 5. 管理数据库

1. 在数据库浏览器中，右键单击数据库以删除它
2. 点击"+"按钮创建新数据库
3. 选择测量并点击"删除"来移除它

### 6. 设置

1. 从侧边栏导航到"设置"
2. 选择您的首选语言（中文/英文）
3. 设置会自动保存

## 💻 开发

### 项目结构

```
influxdb-client/
├── src/
│   ├── background.js       # Electron 主进程
│   ├── App.vue             # 根 Vue 组件
│   ├── main.js             # Vue 应用入口
│   ├── router/            # Vue Router 配置
│   ├── store/              # Vuex 状态管理
│   ├── views/              # 页面组件
│   │   ├── ConnectionManager.vue
│   │   ├── DatabaseExplorer.vue
│   │   ├── QueryEditor.vue
│   │   ├── DataVisualization.vue
│   │   ├── Settings.vue
│   │   └── About.vue
│   ├── components/         # 可复用组件
│   ├── utils/              # 工具函数
│   │   ├── influxdb.js    # InfluxDB 客户端服务
│   │   └── storage.js     # 本地存储服务
│   ├── i18n/              # 国际化
│   └── mixins/            # Vue 混入
├── public/                # 静态资源
└── package.json          # 项目配置
```

### 可用脚本

```bash
# 开发
npm run electron:serve    # 在开发模式下运行，支持热重载
npm run serve            # 仅运行 Web 版本

# 生产构建
npm run electron:build    # 为当前平台构建
npm run electron:build -- --mac    # 为 macOS 构建
npm run electron:build -- --win    # 为 Windows 构建
npm run electron:build -- --linux  # 为 Linux 构建

# 代码质量
npm run lint             # 运行 ESLint
npm run lint:fix         # 修复 ESLint 问题
```

### 环境设置

1. 克隆仓库
2. 安装依赖：`npm install`
3. 启动开发服务器：`npm run electron:serve`
4. 进行您的更改
5. 测试应用程序
6. 构建生产版本：`npm run electron:build`

## 🤝 贡献

欢迎贡献！请随时提交 Pull Request。

1. Fork 本仓库
2. 创建您的功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request

## 📄 许可证

本项目基于 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🔗 链接

- **项目仓库：** [Gitee](https://gitee.com/Gulu_Lv/influx-db-cleint)
- **InfluxDB 文档：** [官方文档](https://docs.influxdata.com/influxdb/)
- **问题追踪：** [报告问题](https://gitee.com/Gulu_Lv/influx-db-cleint/issues)
- **InfluxDB GitHub：** [InfluxDB](https://github.com/influxdata/influxdb)

---

<div align="center">
  <p>© 2025 InfluxDB Client. All rights reserved.</p>
  <p>Built with ❤️ for the time-series data community</p>
  <p>为时间序列数据社区用 ❤️ 打造</p>
</div>