feat(#12): <render> init radar chart

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { MobileComponent } from './presentation/mobile/mobile.component';
 import { LedgeHelperComponent } from './presentation/ledge-helper/ledge-helper.component';
 import { ThinkTankComponent } from './presentation/think-tank/think-tank.component';
 import { SolutionComponent } from './presentation/solution/solution.component';
+import { LedgeRadarComponent } from './shared/ledge-render/chart/ledge-radar/ledge-radar.component';
 
 @NgModule({
   declarations: [
@@ -53,7 +54,7 @@ import { SolutionComponent } from './presentation/solution/solution.component';
     MobileComponent,
     LedgeHelperComponent,
     ThinkTankComponent,
-    SolutionComponent
+    SolutionComponent,
   ],
   imports: [
     SharedModule,
@@ -66,6 +67,6 @@ import { SolutionComponent } from './presentation/solution/solution.component';
     DragulaModule.forRoot(),
   ],
   providers: [Title],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

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

@@ -9,6 +9,16 @@ export class LedgeHelperComponent implements OnInit {
   content = `
 # Syntax Test
 
+\`\`\`radar
+ - 质量属性网络
+   - 可靠性
+   - 可修改性
+   - 安全性
+   - 可测试性
+   - 性能
+   - 可用性
+\`\`\`
+
 \`\`\`pyramid
  - 寻找价值
    - 价值：、

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

@@ -0,0 +1,3 @@
+<div class="ledge-radar chart" #chart>
+
+</div>

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

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

src/app/shared/ledge-render/chart/ledge-radar/ledge-radar.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LedgeRadarComponent } from './ledge-radar.component';
+
+describe('LedgeRadarComponent', () => {
+  let component: LedgeRadarComponent;
+  let fixture: ComponentFixture<LedgeRadarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LedgeRadarComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LedgeRadarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { LedgeList } from '../../../components/model/ledge-chart.model';
+
+@Component({
+  selector: 'ledge-radar',
+  templateUrl: './ledge-radar.component.html',
+  styleUrls: ['./ledge-radar.component.scss'],
+})
+export class LedgeRadarComponent implements OnInit {
+  @Input()
+  data: LedgeList;
+
+  @ViewChild('chart', {}) reporter: ElementRef;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -12,6 +12,10 @@
       <ledge-pyramid [data]="item.data"></ledge-pyramid>
     </div>
 
+    <div *ngSwitchCase="'radar'">
+      <ledge-radar [data]="item.data"></ledge-radar>
+    </div>
+
     <div *ngSwitchCase="'table'">
       <table>
         <thead>

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

@@ -101,6 +101,10 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
         const pyramidData = LedgeMarkdownConverter.toJson(codeBlock.text);
         this.markdownData.push({ type: 'pyramid', data: pyramidData.lists[0] });
         break;
+      case 'radar':
+        const radarData = LedgeMarkdownConverter.toJson(codeBlock.text);
+        this.markdownData.push({ type: 'radar', data: radarData.lists[0] });
+        break;
       default:
         this.markdownData.push(token);
         break;

src/app/shared/shared.module.ts

@@ -18,6 +18,8 @@ import { ToolsetComponent } from './toolset/toolset.component';
 import Tocify from './components/markdown-render/tocify';
 import { LedgeMindmapComponent } from './ledge-render/chart/ledge-mindmap/ledge-mindmap.component';
 import { LedgePyramidComponent } from './ledge-render/chart/ledge-pyramid/ledge-pyramid.component';
+import { SolutionComponent } from '../presentation/solution/solution.component';
+import { LedgeRadarComponent } from './ledge-render/chart/ledge-radar/ledge-radar.component';
 
 @NgModule({
   imports: [
@@ -57,6 +59,7 @@ import { LedgePyramidComponent } from './ledge-render/chart/ledge-pyramid/ledge-
     LedgeBarChartComponent,
     LedgeMindmapComponent,
     LedgePyramidComponent,
+    LedgeRadarComponent,
 
     ToolsetComponent,
   ],
@@ -73,6 +76,7 @@ import { LedgePyramidComponent } from './ledge-render/chart/ledge-pyramid/ledge-
     LedgeBarChartComponent,
     LedgeMindmapComponent,
     LedgePyramidComponent,
+    LedgeRadarComponent,
 
     ToolsetComponent,
   ],