[GitHub] hanahmily closed pull request #199: Update: TraceStack

[GitBox <gi...@apache.org>]

hanahmily closed pull request #199: Update: TraceStack
URL: https://github.com/apache/incubator-skywalking-ui/pull/199
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index c751188..a4bfd7e 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -26,14 +26,6 @@ import styles from './index.less';
 
 const { Description } = DescriptionList;
 
-const colors = [
-  '#1890FF',
-  '#F04864',
-  '#2FC25B',
-  '#FACC14',
-  '#13C2C2',
-  '#8543E0',
-];
 const height = 36;
 const margin = 10;
 const offX = 15;
@@ -51,12 +43,14 @@ class TraceStack extends PureComponent {
 
   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 @@ class TraceStack extends PureComponent {
   }
 
   componentDidMount() {
+    
     this.state.width = this.axis.parentNode.clientWidth - 50;
     this.drawAxis();
     this.displayData();
@@ -171,7 +166,7 @@ class TraceStack extends PureComponent {
         .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 @@ class TraceStack extends PureComponent {
         .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); })
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 {


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services