开源项目构建指南：构建你的雷达图

开源项目构建指南：构建你的雷达图

build-your-own-radar A library that generates an interactive radar, inspired by https://thoughtworks.com/radar/. 项目地址: https://gitcode.com/gh_mirrors/bu/build-your-own-radar

1. 项目介绍

本项目是基于开源项目 build-your-own-radar 的使用和二次开发指南。该项目旨在帮助用户创建一个交互式的雷达图，类似于ThoughtWorks的官方雷达图。雷达图可以用于展示技术、工具、语言和框架的趋势和状态。

2. 项目快速启动

环境准备

在开始之前，请确保你的系统已经安装了以下环境：

• Node.js (推荐使用LTS版本)
• Git

克隆项目

首先，克隆项目到本地：

git clone https://github.com/thoughtworks/build-your-own-radar.git
cd build-your-own-radar

安装依赖

接下来，安装项目依赖：

npm install

启动开发服务器

安装依赖后，可以启动开发服务器：

npm run start

此时，项目将在本地浏览器中自动打开，并展示一个交互式的雷达图。

构建生产版本

当开发完成后，构建生产版本的雷达图：

npm run build

构建的文件将位于 dist 目录。

3. 应用案例和最佳实践

使用Google Sheets数据

项目支持从Google Sheets中读取数据。创建一个Google Sheets文档，并设置以下列：

• name
• ring
• quadrant
• isNew
• description
• status (可选，用于展示移动信息)

设置Google Sheets的共享权限为“任何人都可以查看”，并使用链接中的ID部分作为数据源。

使用CSV或JSON数据

除了Google Sheets，你还可以使用CSV或JSON格式的数据。确保数据格式与Google Sheets的列对应。

CSV示例

name,ring,quadrant,isNew,description
Composer,adopt,tools,TRUE,"虽然依赖管理的概念..."
Canary builds,trial,techniques,FALSE,"许多项目有外部的代码依赖..."

JSON示例

[
  {
    "name": "Composer",
    "ring": "adopt",
    "quadrant": "tools",
    "isNew": "TRUE",
    "description": "虽然依赖管理的概念..."
  },
  {
    "name": "Canary builds",
    "ring": "trial",
    "quadrant": "techniques",
    "isNew": "FALSE",
    "description": "许多项目有外部的代码依赖..."
  }
]

4. 典型生态项目

集成到现有应用

你可以将雷达图集成到现有的Web应用中。通过修改项目配置，将雷达图作为前端组件嵌入到你的应用中。

使用Docker部署

为了简化部署过程，可以使用Docker。创建一个Dockerfile，并使用项目提供的Docker镜像。

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]

构建并运行Docker容器：

docker build -t radar-app .
docker run -d -p 8080:8080 radar-app

以上就是构建你的雷达图开源项目的完整指南。希望这个项目能帮助你更好地展示和分析技术趋势。

build-your-own-radar A library that generates an interactive radar, inspired by https://thoughtworks.com/radar/. 项目地址: https://gitcode.com/gh_mirrors/bu/build-your-own-radar