feat: add table examples

package.json

@@ -24,6 +24,7 @@
     "@angular/router": "~9.0.3",
     "@ngx-pwa/local-storage": "^9.0.2",
     "d3": "^3.5.17",
+    "echarts": "^4.6.0",
     "lodash-es": "^4.17.15",
     "marked": "^0.8.0",
     "ng2-dragula": "^2.1.1",

src/app/app-routing.module.ts

@@ -6,8 +6,9 @@ import { PatternComponent } from './presentation/pattern/pattern.component';
 import { DesignComponent } from './presentation/design/design.component';
 import { PractiseComponent } from './presentation/practise/practise.component';
 import { ManualComponent } from './presentation/manual/manual.component';
-import {MaturityComponent} from './maturity/maturity.component';
+import {MaturityComponent} from './presentation/maturity/maturity.component';
 import {ResourcesComponent} from './presentation/resources/resources.component';
+import {ReporterComponent} from './presentation/reporter/reporter.component';
 
 const routes: Routes = [
   {path: '', pathMatch: 'full', redirectTo: '/home'},
@@ -42,6 +43,10 @@ const routes: Routes = [
   {
     path: 'resources',
     component: ResourcesComponent
+  },
+  {
+    path: 'report',
+    component: ReporterComponent
   }
 ];
 

src/app/app.component.html

@@ -11,6 +11,7 @@
       <button mat-button routerLink="/manual" routerLinkActive="active">操作手册</button>
       <button mat-button routerLink="/maturity" routerLinkActive="active">度量</button>
       <button mat-button routerLink="/resources" routerLinkActive="active">相关资源</button>
+      <button mat-button routerLink="/report" routerLinkActive="active">报告</button>
       <a mat-button href="https://migration.ink/" target="_blank">系统重构</a>
     </div>
   </mat-toolbar-row>

src/app/app.module.ts

@@ -23,8 +23,9 @@ import { ManualComponent } from './presentation/manual/manual.component';
 import { PathComponent } from './features/path/path.component';
 import { FormsModule } from '@angular/forms';
 import { DragulaModule } from 'ng2-dragula';
-import { MaturityComponent } from './maturity/maturity.component';
+import { MaturityComponent } from './presentation/maturity/maturity.component';
 import { ResourcesComponent } from './presentation/resources/resources.component';
+import { ReporterComponent } from './presentation/reporter/reporter.component';
 
 @NgModule({
   declarations: [
@@ -46,6 +47,7 @@ import { ResourcesComponent } from './presentation/resources/resources.component
     PathComponent,
     MaturityComponent,
     ResourcesComponent,
+    ReporterComponent
   ],
   imports: [
     SharedModule,

src/app/maturity/maturity.component.ts → src/app/presentation/maturity/maturity.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import marked from 'marked';
-import MarkdownHelper from '../shared/components/model/markdown.helper';
-import {MarkdownTaskItemService} from '../shared/components/markdown-radar-chart/markdown-task-item.service';
-import {MarkdownListModel} from '../shared/components/model/markdown.model';
+import MarkdownHelper from '../../shared/components/model/markdown.helper';
+import {MarkdownTaskItemService} from '../../shared/components/markdown-radar-chart/markdown-task-item.service';
+import {MarkdownListModel} from '../../shared/components/model/markdown.model';
 import {StorageMap} from '@ngx-pwa/local-storage';
 
 @Component({

src/app/presentation/reporter/reporter.component.html

@@ -0,0 +1,3 @@
+<p>reporter works!</p>
+
+<component-markdown-reporter></component-markdown-reporter>

src/app/presentation/reporter/reporter.component.spec.ts

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

src/app/presentation/reporter/reporter.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-reporter',
+  templateUrl: './reporter.component.html',
+  styleUrls: ['./reporter.component.scss']
+})
+export class ReporterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/shared/components/markdown-reporter/markdown-reporter.component.html

@@ -0,0 +1,3 @@
+<div class="reporter" #reporter>
+
+</div>

src/app/shared/components/markdown-reporter/markdown-reporter.component.scss

@@ -0,0 +1,6 @@
+.reporter {
+  width: auto;
+  height: auto;
+  min-width: 300px;
+  min-height: 300px;
+}

src/app/shared/components/markdown-reporter/markdown-reporter.component.spec.ts

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

src/app/shared/components/markdown-reporter/markdown-reporter.component.ts

@@ -0,0 +1,82 @@
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import * as echarts from 'echarts';
+
+@Component({
+  selector: 'component-markdown-reporter',
+  templateUrl: './markdown-reporter.component.html',
+  styleUrls: ['./markdown-reporter.component.scss']
+})
+export class MarkdownReporterComponent implements OnInit, AfterViewInit {
+  @ViewChild('reporter', {}) reporter: ElementRef;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    const myChart = echarts.init(this.reporter.nativeElement);
+    myChart.setOption({
+      backgroundColor: '#2c343c',
+
+      title: {
+        text: 'Customized Pie',
+        left: 'center',
+        top: 20,
+        textStyle: {
+          color: '#ccc'
+        }
+      },
+
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)'
+      },
+      visualMap: {
+        show: false,
+        min: 80,
+        max: 600,
+        inRange: {
+          colorLightness: [0, 1]
+        }
+      },
+      series: [
+        {
+          name: '访问来源',
+          type: 'pie',
+          radius: '55%',
+          center: ['50%', '50%'],
+          data: [
+            {value: 335, name: '直接访问'},
+            {value: 310, name: '邮件营销'},
+            {value: 274, name: '联盟广告'},
+            {value: 235, name: '视频广告'},
+            {value: 400, name: '搜索引擎'}
+          ].sort((a, b) => a.value - b.value),
+          roseType: 'radius',
+          label: {
+            color: 'rgba(255, 255, 255, 0.3)'
+          },
+          labelLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.3)'
+            },
+            smooth: 0.2,
+            length: 10,
+            length2: 20
+          },
+          itemStyle: {
+            color: '#c23531',
+            shadowBlur: 200,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          },
+
+          animationType: 'scale',
+          animationEasing: 'elasticOut',
+          animationDelay: idx => Math.random() * 200
+        }
+      ]
+    });
+  }
+
+}

src/app/shared/shared.module.ts

@@ -10,6 +10,7 @@ import { MarkdownRadarChartComponent } from './components/markdown-radar-chart/m
 import { MarkdownRatingComponent } from './components/markdown-radar-chart/markdown-rating/markdown-rating.component';
 import { MarkdownRatingItemComponent } from './components/markdown-radar-chart/markdown-rating-item/markdown-rating-item.component';
 import { ProcessTableComponent } from './components/process-table/process-table.component';
+import {MarkdownReporterComponent} from './components/markdown-reporter/markdown-reporter.component';
 
 @NgModule({
   imports: [
@@ -27,6 +28,7 @@ import { ProcessTableComponent } from './components/process-table/process-table.
     MarkdownRatingItemComponent,
     MarkdownRadarChartComponent,
     ProcessTableComponent,
+    MarkdownReporterComponent,
   ],
   providers: [
   ],
@@ -36,6 +38,7 @@ import { ProcessTableComponent } from './components/process-table/process-table.
     MarkdownRatingItemComponent,
     MarkdownRadarChartComponent,
     ProcessTableComponent,
+    MarkdownReporterComponent,
   ],
   entryComponents: []
 })

yarn.lock

@@ -3048,6 +3048,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.6.0.tgz#b5a47a1046cec93ceeef954f9ee54751340558ec"
+  integrity sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==
+  dependencies:
+    zrender "4.2.0"
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -8796,3 +8803,8 @@ zone.js@~0.10.2:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.10.2.tgz#67ca084b3116fc33fc40435e0d5ea40a207e392e"
   integrity sha512-UAYfiuvxLN4oyuqhJwd21Uxb4CNawrq6fPS/05Su5L4G+1TN+HVDJMUHNMobVQDFJRir2cLAODXwluaOKB7HFg==
+
+[email protected]:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.2.0.tgz#d001302e155f28de1f9fc7fcd5c254bad28471cf"
+  integrity sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA==