feat: init sunburrts

projects/ledge-render/src/lib/chart/ledge-sunburst/ledge-sunburst.component.html

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

projects/ledge-render/src/lib/chart/ledge-sunburst/ledge-sunburst.component.scss

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

projects/ledge-render/src/lib/chart/ledge-sunburst/ledge-sunburst.component.spec.ts

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

projects/ledge-render/src/lib/chart/ledge-sunburst/ledge-sunburst.component.ts

@@ -0,0 +1,72 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import * as echarts from 'echarts';
+import { LedgeList, LedgeListItem } from '../../components/model/ledge-chart.model';
+
+
+@Component({
+ selector: 'ledge-sunburst',
+ templateUrl: './ledge-sunburst.component.html',
+ styleUrls: ['./ledge-sunburst.component.scss']
+})
+export class LedgeSunburstComponent implements OnInit, AfterViewInit {
+ @Input()
+ data: LedgeListItem[];
+
+ @Input()
+ config: any;
+
+ @ViewChild('chart', {}) chart: ElementRef;
+
+ private childLevel = 1;
+
+ ngOnInit(): void {
+ }
+
+ ngAfterViewInit(): void {
+ const myChart = echarts.init(this.chart.nativeElement);
+ const result = this.setValue(this.data, 0);
+ console.log(result);
+ const option = this.buildOption(this.data);
+ console.log(this.data);
+ myChart.setOption(option as any);
+ }
+
+ private buildOption(treeData: any) {
+ return {
+ visualMap: {
+ type: 'continuous',
+ min: 0,
+ max: 10,
+ inRange: {
+ color: ['#2D5F73', '#538EA6', '#F2D1B3', '#F2B8A2', '#F28C8C']
+ }
+ },
+ series: {
+ type: 'sunburst',
+ data: treeData,
+ radius: [0, '90%'],
+ label: {
+ rotate: 'radial'
+ }
+ }
+ };
+ }
+
+ private setValue(list: LedgeListItem[], value) {
+ for (const item of list) {
+ value++;
+ if (item.children) {
+ this.setValue(item.children, value);
+ item.value = value;
+ item.itemStyle = {
+ color: '#FFB499'
+ };
+ } else {
+ item.value = 1;
+ value = 0;
+ }
+ }
+
+ return list;
+ }
+}

projects/ledge-render/src/lib/components/model/ledge-chart.model.ts

@@ -23,6 +23,9 @@ export interface LedgeListItem {
  children?: LedgeListItem[];
  name?: string;
  checked?: boolean;
+
+ value?: number;
+ itemStyle?: any;
 }
 
 export interface LedgeList {

projects/ledge-render/src/lib/ledge-render.component.html

@@ -66,6 +66,10 @@
  <ledge-checklist [data]="item.data" [config]="item.config"></ledge-checklist>
  </div>
 
+ <div *ngSwitchCase="'sunburst'">
+ <ledge-sunburst [data]="item.data" [config]="item.config"></ledge-sunburst>
+ </div>
+
  <div *ngSwitchCase="'table'">
  <table>
  <thead>

projects/ledge-render/src/lib/ledge-render.component.ts

@@ -355,6 +355,14 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
  config: checklistData.config,
  });
  break;
+ case 'sunburst':
+ const sunburstData = LedgeMarkdownConverter.toJson(codeBlock.text);
+ this.markdownData.push({
+ type: 'sunburst',
+ data: sunburstData.lists[0].children,
+ config: sunburstData.config,
+ });
+ break;
  case 'mermaid':
  const mermaidData = codeBlock.text;
  this.markdownData.push({

projects/ledge-render/src/lib/ledge-render.module.ts

@@ -25,6 +25,7 @@ import { LedgeStorageService } from './services/ledge-storage.service';
 import { LedgeChecklistComponent } from './components/ledge-checklist/ledge-checklist.component';
 import { LedgeMermaidComponent } from './components/ledge-mermaid/ledge-mermaid.component';
 import { TohtmlPipe } from './pipes/tohtml.pipe';
+import { LedgeSunburstComponent } from './chart/ledge-sunburst/ledge-sunburst.component';
 
 const LedgeComponents = [
  LedgeRenderComponent,
@@ -45,6 +46,7 @@ const LedgeComponents = [
  LedgeKanbanComponent,
  LedgeChecklistComponent,
  LedgeMermaidComponent,
+ LedgeSunburstComponent,
 
  ComponentTodoComponent,
  ComponentChecklistComponent,

src/assets/docs/pattern.md

@@ -187,112 +187,115 @@ ThoughtWorks Tech Lead 模型
 
 ### DevSecOps 示例
 
-- 需求
- - Wekan
- - Gitlab
- - Ganttlab
-- 开发（后端）
- - Swagger
- - knife4j
- - Spring Cloud Alibaba
- - Skaffolder CLI
-- 开发（前端）
- - Swagger
- - Pont
- - Jest.js
-- IDE
- - Idea
- - Sonarlint
-- 版本控制
- - truffleHog \*
- - Git Toolkit
- - Gitlab
- - git-secrets \*
-- 持续集成
- - Jenkins
- - Blue Ocean
- - Health Advisor
- - Prometheus
- - Docker
- - Git
- - Pipeline
-- 构建
- - Dockerfile
- - hadolint \*
-- 分析
- - SAST \*
- - Sonarqube
- - Snyk
- - FOSSology
- - CodeQL CLI
- - Compliance \*
- - SCA \*
- - Ort
- - Dependency-Check
- - Dependency-Track
-- 制品
- - 供应链安全 \*
- - ClearlyDefined
- - OpenChain
- - 容器 \*
- - Anchore
- - Trivy
- - Clair
- - 优化
- - Docker Slim
- - 源
- - Nexus
- - Artifactory
- - Archiva
-- 部署
- - Ansible
- - Nomad
- - Docker Compose
- - Make
- - Werf
- - Tekton
- - Screwdriver
-- 环境
- - OS
- - Zsh
- - Docker
- - Kubernetes
- - Rancher
- - OpenShift/OKD
- - KubeOperator
- - hardening & compliance \*
- - kube-hunter
- - Falco
- - Lynis
- - diagnosis
- - Sysdig Inspect
- - Arthus reaction
- - monitoring
- - Prometheus/Grafana
- - Influxdb
- - apm & tracing
- - Skywalking
- - logging
- - ELK
- - Loki
-- 集成测试
- - Fuzzing \*
- - 自动化测试
- - Dredd
- - Newman + Postman
- - Http Runner 基于录制
- - Cucumber
- - galasa-dev
- - Pact
- - DAST \*
- - Zed
- - Openvas Nvt
- - Contrast Security
- - Vulscan
- - Nessus
- - Vuls.io
-- 可见性
- - Hygieia
+```sunburst
+ - DevSecOps 示例
+ - 需求
+ - Wekan
+ - Gitlab
+ - Ganttlab
+ - 开发（后端）
+ - Swagger
+ - knife4j
+ - Spring Cloud Alibaba
+ - Skaffolder CLI
+ - 开发（前端）
+ - Swagger
+ - Pont
+ - Jest.js
+ - IDE
+ - Idea
+ - Sonarlint
+ - 版本控制
+ - truffleHog \*
+ - Git Toolkit
+ - Gitlab
+ - git-secrets \*
+ - 持续集成
+ - Jenkins
+ - Blue Ocean
+ - Health Advisor
+ - Prometheus
+ - Docker
+ - Git
+ - Pipeline
+ - 构建
+ - Dockerfile
+ - hadolint \*
+ - 分析
+ - SAST \*
+ - Sonarqube
+ - Snyk
+ - FOSSology
+ - CodeQL CLI
+ - Compliance \*
+ - SCA \*
+ - Ort
+ - Dependency-Check
+ - Dependency-Track
+ - 制品
+ - 供应链安全 \*
+ - ClearlyDefined
+ - OpenChain
+ - 容器 \*
+ - Anchore
+ - Trivy
+ - Clair
+ - 优化
+ - Docker Slim
+ - 源
+ - Nexus
+ - Artifactory
+ - Archiva
+ - 部署
+ - Ansible
+ - Nomad
+ - Docker Compose
+ - Make
+ - Werf
+ - Tekton
+ - Screwdriver
+ - 环境
+ - OS
+ - Zsh
+ - Docker
+ - Kubernetes
+ - Rancher
+ - OpenShift/OKD
+ - KubeOperator
+ - hardening & compliance \*
+ - kube-hunter
+ - Falco
+ - Lynis
+ - diagnosis
+ - Sysdig Inspect
+ - Arthus reaction
+ - monitoring
+ - Prometheus/Grafana
+ - Influxdb
+ - apm & tracing
+ - Skywalking
+ - logging
+ - ELK
+ - Loki
+ - 集成测试
+ - Fuzzing \*
+ - 自动化测试
+ - Dredd
+ - Newman + Postman
+ - Http Runner 基于录制
+ - Cucumber
+ - galasa-dev
+ - Pact
+ - DAST \*
+ - Zed
+ - Openvas Nvt
+ - Contrast Security
+ - Vulscan
+ - Nessus
+ - Vuls.io
+ - 可见性
+ - Hygieia
+```
 
 ## BizDevOps