feat(render): add config for tree

phodal · May 9, 2020 · 276b206 · 276b206
1 parent 5d4b072
commit 276b206
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 119 deletions.
diff --git a/projects/ledge-render/src/lib/chart/ledge-tree/ledge-tree.component.ts b/projects/ledge-render/src/lib/chart/ledge-tree/ledge-tree.component.ts
@@ -36,8 +36,19 @@ export class LedgeTreeComponent implements OnInit, OnChanges {
  const chartElement = this.chartEl.nativeElement;
  // Set the dimensions and margins of the diagram
  const margin = {top: 20, right: 90, bottom: 30, left: 90};
- const width = 960 - margin.left - margin.right;
- const height = 800 - margin.top - margin.bottom;
+ let chartHeight = 800;
+ let chartWidth = 960;
+ if (this.config) {
+ if (this.config.height) {
+ chartHeight = this.config.height;
+ }
+ if (this.config.width) {
+ chartWidth = this.config.width;
+ }
+ }
+
+ const width = chartWidth - margin.left - margin.right;
+ const height = chartHeight - margin.top - margin.bottom;
 
  // append the svg object to the body of the page
  // appends a 'group' element to 'svg'
@@ -62,8 +73,9 @@ export class LedgeTreeComponent implements OnInit, OnChanges {
  root.y0 = 0;
 
  // Collapse after the second level
- // todo: make as configurable
- // root.children.forEach(collapse);
+ if (this.config && this.config.collapse) {
+ root.children.forEach(collapse);
+ }
 
  update(root);
 

diff --git a/src/assets/docs/help.md b/src/assets/docs/help.md
@@ -24,6 +24,8 @@
  - 分支合并
  - 外卖业务库合入 Aimeituan 提测分支
  - 全量提醒
+
+config: {"collapse": true, "height": 400, "width": 800}
 ```
 
 ```maturity

diff --git a/src/assets/docs/resources.md b/src/assets/docs/resources.md
@@ -100,119 +100,122 @@ config: {"hiddenLegend": true}
 
 来源：[https:/raycad/devops-roadmap](https:/raycad/devops-roadmap)
 
-```mindmap
- - 源码管理
- - 源码管理服务
- - Gitlab
- - Gitea
- - Gogs
- - 前端
- - 框架
- - React
- - Angular
- - Vue
- - 构建工具
- - Webpack + Gulp
- - 单元测试
- - Jest
- - Jasmine
- - Karma
- - 后端
- - 语言和框架
- - Golang
- - Gin
- - Echo
- - Java
- - Spring Boot
- - Node.js
- - Express
- - Koa
- - Next.js
- - Python
- - Django
- - Flask
- - IAM
- - OAuth
- - JWT
- - 消息代理
- - Kafka
- - RabbitMQ
- - ZeroMQ
- - Web 服务器
- - Apache
- - Nginx
- - Mock API
- - JSON Server
- - Moco
- - Mockoon
- - API 文档
- - Swagger
- - 数据库
- - 关系型数据库
- - PostreSQL
- - MariaDB
- - MySQL
- - 非关系型数据库
- - 文档存储
- - MongoDB
- - RethinkDB
- - 键值存储
- - Redis
- - Memcached
- - 搜索引擎
- - ElasticSearch
- - Solr
- - 时序
- - InfluxDB
- - Graphite
- - 图形数据库
- - Neo4j
- - API 网关
- - Traefik
- - Kong
- - Zuul
- - 云计算
- - OpenStack
- - CloudStack
- - 服务测试
- - API 测试
- - jMeter
- - Postman
- - 性能测试
- - nGrinder
- - jMeter
- - wrk
- - 自动化 E2E 测试
- - Selenium
- - Cucumber
- - 运维
- - 容器化
- - Docker
- - 编排
- - Kubernetes
- - CI/CD
- - Jenkins
- - GoCD
- - Drone
- - 配置管理
- - Ansible
- - Chef
- - 监控
- - Grafana
- - Nagios
- - Icingga
- - 日志管理
- - ELK
- - Fluentd
- - Apache Flume
- - 大数据
- - 数据流
- - Apache Spark Streaming
- - Flink
- - 数据处理
- - Apache Spark
- - Apache Storm
- - 数据集成（ETL)
- - Apache NiFi
- - Pentaho
+```tree
+ - 技术栈知识图谱
+ - 源码管理
+ - 源码管理服务
+ - Gitlab
+ - Gitea
+ - Gogs
+ - 前端
+ - 框架
+ - React
+ - Angular
+ - Vue
+ - 构建工具
+ - Webpack + Gulp
+ - 单元测试
+ - Jest
+ - Jasmine
+ - Karma
+ - 后端
+ - 语言和框架
+ - Golang
+ - Gin
+ - Echo
+ - Java
+ - Spring Boot
+ - Node.js
+ - Express
+ - Koa
+ - Next.js
+ - Python
+ - Django
+ - Flask
+ - IAM
+ - OAuth
+ - JWT
+ - 消息代理
+ - Kafka
+ - RabbitMQ
+ - ZeroMQ
+ - Web 服务器
+ - Apache
+ - Nginx
+ - Mock API
+ - JSON Server
+ - Moco
+ - Mockoon
+ - API 文档
+ - Swagger
+ - 数据库
+ - 关系型数据库
+ - PostreSQL
+ - MariaDB
+ - MySQL
+ - 非关系型数据库
+ - 文档存储
+ - MongoDB
+ - RethinkDB
+ - 键值存储
+ - Redis
+ - Memcached
+ - 搜索引擎
+ - ElasticSearch
+ - Solr
+ - 时序
+ - InfluxDB
+ - Graphite
+ - 图形数据库
+ - Neo4j
+ - API 网关
+ - Traefik
+ - Kong
+ - Zuul
+ - 云计算
+ - OpenStack
+ - CloudStack
+ - 服务测试
+ - API 测试
+ - jMeter
+ - Postman
+ - 性能测试
+ - nGrinder
+ - jMeter
+ - wrk
+ - 自动化 E2E 测试
+ - Selenium
+ - Cucumber
+ - 运维
+ - 容器化
+ - Docker
+ - 编排
+ - Kubernetes
+ - CI/CD
+ - Jenkins
+ - GoCD
+ - Drone
+ - 配置管理
+ - Ansible
+ - Chef
+ - 监控
+ - Grafana
+ - Nagios
+ - Icingga
+ - 日志管理
+ - ELK
+ - Fluentd
+ - Apache Flume
+ - 大数据
+ - 数据流
+ - Apache Spark Streaming
+ - Flink
+ - 数据处理
+ - Apache Spark
+ - Apache Storm
+ - 数据集成（ETL)
+ - Apache NiFi
+ - Pentaho
+
+config: {"height": 1200, "width": 1200}
 ```