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,
  ],