commit 6ce611cb242e3216e67a72860bfa884f68f2d0a0
author Gao Hongtao <hanahmily@gmail.com> Mon Nov 26 13:56:19 2018 +0800
committer GitHub <noreply@github.com> Mon Nov 26 13:56:19 2018 +0800
tree 3a12d67dbb1232ca1266293c75e029f9f93e3784
parent 0bb3c51f3b87128ba0285509809d948a1c02b3af
parent 0e7e745e7034718f5a73f209ff18e9d570cbe61d

Merge pull request #199 from TinyAllen/master

Update: TraceStack

src/components/TraceStack/index.js

diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index 0f3a357..53ecfbb 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -26,14 +26,6 @@
 
 const { Description } = DescriptionList;
 
-const colors = [
-  '#1890FF',
-  '#F04864',
-  '#2FC25B',
-  '#FACC14',
-  '#13C2C2',
-  '#8543E0',
-];
 const height = 36;
 const margin = 10;
 const offX = 15;
@@ -51,12 +43,14 @@
 
   componentWillMount() {
     const { spans } = this.props;
-    let colorIndex = 0;
+    const { colorMap } = this.state;
+    const serviceList = Array.from(new Set(spans.map(i => i.serviceCode)));
+    const sequentialScale = d3.scaleSequential()
+    .domain([0, serviceList.length])
+    .interpolator(d3.interpolateCool);
     spans.forEach((span) => {
-      const { colorMap } = this.state;
       if (!colorMap[span.serviceCode]) {
-        colorMap[span.serviceCode] = colors[colorIndex];
-        colorIndex = (colorIndex < colors.length - 1) ? (colorIndex + 1) : 0;
+        colorMap[span.serviceCode] = sequentialScale(serviceList.indexOf(span.serviceCode))
       }
       this.buildNode(span);
     });
@@ -67,6 +61,7 @@
   }
 
   componentDidMount() {
+    
     this.state.width = this.axis.parentNode.clientWidth - 50;
     this.drawAxis();
     this.displayData();
@@ -171,7 +166,7 @@
         .on('mouseout', () => { this.selectTimeline(container, false); })
         .on('click', () => { this.showSpanModal(node, position, container); });
 
-      bar.append('rect').attr('x', beginX).attr('y', beginY).attr('width', rectWith)
+      bar.append('rect').attr('x', beginX).attr('y', beginY).attr('width', rectWith + 0.1)
         .attr('height', rectHeight)
         .on('mouseover', () => { this.selectTimeline(container, true); })
         .on('mouseout', () => { this.selectTimeline(container, false); })
@@ -179,8 +174,13 @@
         .style('fill', colorMap[serviceCode]);
 
       bar.append('text')
-        .attr('x', beginX + 5)
-        .attr('y', (index * height) + (height / 2))
+        .attr('x', () => {
+          if ((width - beginX) < (content.length * 5.2)) {
+            return beginX - content.length * 5.2 - 45
+          }
+          return beginX + 8;
+        })
+        .attr('y', (index * height) + (height / 2) - 2)
         .attr('class', styles.rectText)
         .on('mouseover', () => { this.selectTimeline(container, true); })
         .on('mouseout', () => { this.selectTimeline(container, false); })

src/components/TraceStack/index.less

diff --git a/src/components/TraceStack/index.less b/src/components/TraceStack/index.less
index 62e59ba..4295dff 100644
--- a/src/components/TraceStack/index.less
+++ b/src/components/TraceStack/index.less
@@ -29,7 +29,6 @@
     stroke-dasharray: 3 5;

   }

   text {

-    font-size: 12px;

     fill: #bfbfbf;

     font-weight: bold;

   }

@@ -39,9 +38,9 @@
 }

 

 .rectText {

-  font: 11px;

-  font-weight: inherit;

-  fill: #797979;

+  font-size: 11px;

+  fill: #fff;

+  text-shadow: 1px 1px 1px #000;

 }

 

 .stack {