feat(fishbone): add config for height & width

phodal · Apr 28, 2020 · fa95d63 · fa95d63
1 parent c4e7586
commit fa95d63
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/projects/ledge-render/src/lib/chart/ledge-fish-bone/fishbone.ts b/projects/ledge-render/src/lib/chart/ledge-fish-bone/fishbone.ts
@@ -31,8 +31,8 @@ const fishbone = () => {
   let dataLinks = [];
 
   const my: any = undefined;
-  const width = 1200;
-  const height = 800;
+  let width = 1200;
+  let height = 800;
 
   // d3 selections and related things used in tick function
   let node;
@@ -406,6 +406,12 @@ const fishbone = () => {
     return my;
   };
 
+  fb1.setWidthHeight = (w, h) => {
+    width = w;
+    height = h;
+    forceLayout.force('center', d3.forceCenter(width / 2, height / 2))
+  }
+
   return fb1;
 };
 

diff --git a/projects/ledge-render/src/lib/chart/ledge-fish-bone/ledge-fish-bone.component.ts b/projects/ledge-render/src/lib/chart/ledge-fish-bone/ledge-fish-bone.component.ts
@@ -26,12 +26,24 @@ export class LedgeFishBoneComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit(): void {
     const data = this.data[0];
-    console.log(data);
     const fb = fishbone();
+    let width = 1200;
+    let height = 800;
+
+    if (this.config) {
+      if (this.config.width) {
+        width = this.config.width;
+      }
+      if (this.config.height) {
+        height = this.config.height;
+      }
+    }
+
+    fb.setWidthHeight(width, height);
     d3.select(this.chart.nativeElement)
       .append('svg')
-      .attr('width', 1200)
-      .attr('height', 800)
+      .attr('width', width)
+      .attr('height', height)
       .datum(data)
       .call(fb.defaultArrow)
       .call(fb);

diff --git a/src/assets/docs/help.md b/src/assets/docs/help.md
@@ -4,10 +4,17 @@
  - Path to Production
    - Feat
    - Design
+     - Pair Review
    - Dev
+     - PrePush
+     - Code Review
+   - Test
+     - Desk Check
    - Build
    - Deploy
    - Operatino
+
+config: {"height": 600, "width": 800}
 ```
 
 ## 读书雷达