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 {
-
-}