feat: #12 <render> add mindmap for ledge render

src/app/presentation/ledge-helper/ledge-helper.component.ts

@@ -9,6 +9,33 @@ export class LedgeHelperComponent implements OnInit {
  content = `
 # Syntax Test
 
+\`\`\`mindmap
+ - CI 建设
+ - 开发阶段准备
+ - 拉 Aimeituan 工程的开发分支
+ - 修改开发分支版本号
+ - Aimeituan 工程独立编译自动配置
+ - PR 检测
+ - 静态检测
+ - 增量检测
+ - SDK
+ - 包大小
+ - 单测
+ - 开发阶段
+ - 定时检测壳工程是否有更新，触发自动打包
+ - 每日最新版本号提醒
+ - 提测阶段
+ - 冒烟提醒
+ - 自动拉提测分支
+ - 业务库检测是否有 PR 未合入
+ - 提测打包、发提测邮件
+ - 发版阶段
+ - 分支合并
+ - 外卖业务库合入 Aimeituan 提测分支
+ - 全量提醒
+\`\`\`
+
+
 \`\`\`process-step
  - 平台层
  - 运维平台

src/app/shared/ledge-render/chart/ledge-mindmap/ledge-mindmap.component.html

@@ -1 +1,3 @@
-<p>ledge-mindmap works!</p>
+<div class="mindmap reporter" #reporter>
+
+</div>

src/app/shared/ledge-render/chart/ledge-mindmap/ledge-mindmap.component.scss

@@ -0,0 +1,7 @@
+.reporter {
+ width: auto;
+ height: auto;
+ min-width: 500px;
+ min-height: 500px;
+ max-width: 800px;
+}

src/app/shared/ledge-render/chart/ledge-mindmap/ledge-mindmap.component.ts

@@ -1,18 +1,118 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { LedgeTable } from '../../../components/model/ledge-chart.model';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { LedgeList } from '../../../components/model/ledge-chart.model';
+import * as echarts from 'echarts';
 
 @Component({
  selector: 'ledge-mindmap',
  templateUrl: './ledge-mindmap.component.html',
  styleUrls: ['./ledge-mindmap.component.scss']
 })
-export class LedgeMindmapComponent implements OnInit {
+export class LedgeMindmapComponent implements OnInit, AfterViewInit {
  @Input()
- data: LedgeTable;
+ data: LedgeList;
 
- constructor() { }
+ @ViewChild('reporter', {}) reporter: ElementRef;
+
+ constructor() {
+ }
 
  ngOnInit(): void {
+ console.log(this.data);
+ }
+
+ ngAfterViewInit(): void {
+ const myChart = echarts.init(this.reporter.nativeElement);
+ const treeData = this.toTreeData(this.data.children);
+ const option = this.buildMindmapOption(treeData);
+ console.log(option);
+ myChart.setOption(option as any);
+ }
+
+
+ private toTreeData(data: any) {
+ if (data.length === 1) {
+ const anies = this.transformTreeData(data);
+ return anies[0];
+ }
+
+ const treeInfo = this.transformTreeData(data);
+ return {
+ name: '',
+ children: treeInfo,
+ config: data.config
+ };
+ }
+
+ private transformTreeData(data: any) {
+ const nodes = [];
+ for (const item of data) {
+ const node: any = {};
+ node.name = item.name;
+ if (item.children && item.children.length > 0) {
+ node.children = this.transformTreeData(item.children);
+ }
+ nodes.push(node);
+ }
+ return nodes;
+ }
+
+ buildMindmapOption(data) {
+ let height = '600px';
+ const dataStr = JSON.stringify(data);
+ if (dataStr.length > 500) {
+ height = '720px';
+ }
+
+ return {
+ feature: {
+ saveAsImage: {}
+ },
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+ series: [
+ {
+ height,
+ type: 'tree',
+ roam: true,
+ id: 0,
+ name: 'tree1',
+ data: [data],
+ top: '12%',
+ left: '18%',
+ bottom: '12%',
+ right: '40%',
+ symbolSize: 12,
+ edgeShape: 'polyline',
+ edgeForkPosition: '63%',
+ initialTreeDepth: 3,
+ lineStyle: {
+ width: 2
+ },
+
+ label: {
+ backgroundColor: '#fff',
+ position: 'left',
+ verticalAlign: 'middle',
+ align: 'right',
+ fontSize: 14
+ },
+
+ leaves: {
+ label: {
+ position: 'right',
+ verticalAlign: 'middle',
+ align: 'left'
+ }
+ },
+
+ expandAndCollapse: true,
+ animationDuration: 550,
+ animationDurationUpdate: 750
+ }
+ ]
+ };
  }
 
 }

src/app/shared/ledge-render/ledge-render.component.html

@@ -1,15 +1,11 @@
 <div *ngFor="let item of markdownData" class="markdown-reporter markdown">
  <div [ngSwitch]="item.type">
  <div *ngSwitchCase="'chart'">
- <div class="charts">
- <ledge-bar-chart [data]="item.data"></ledge-bar-chart>
- </div>
+ <ledge-bar-chart [data]="item.data"></ledge-bar-chart>
  </div>
 
  <div *ngSwitchCase="'mindmap'">
- <div class="charts">
- <ledge-mindmap [data]="item.data"></ledge-mindmap>
- </div>
+ <ledge-mindmap [data]="item.data"></ledge-mindmap>
  </div>
 
  <div *ngSwitchCase="'table'">

src/app/shared/ledge-render/ledge-render.component.scss

@@ -3,6 +3,3 @@
  margin: 4em auto 0;
 }
 
-.charts {
-
-}