Merge pull request #1 from alannahw/alannahw/add-ranking-table

Adds ranking table below the sunburst charts
kausalco · Nov 6, 2017 · 54a357d · 54a357d
2 parents 78c0a87 + e489da9
commit 54a357d
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 21 deletions.
diff --git a/src/Sunburst.css b/src/Sunburst.css
@@ -19,18 +19,28 @@
   font-size: 12px;
 }
 
+.sunburst .sunburstTitle {
+  font-weight: bold;
+}
+
 .sunburst .legend {
   transition: opacity 0.6s ease;
-  margin-top: 4rem;
-  margin-bottom: 0.5rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding: 1rem 0;
   width: 100%;
-  white-space: nowrap;
-  word-break: break-all;
-  overflow: hidden;
-  text-overflow: ellipsis;
   opacity: 0.7;
+  text-align: center;
 }
 
 .sunburst .legend.active {
   opacity: 1;
 }
+.sunburst table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.sunburst table td {
+  border-color: #ccc;
+}
diff --git a/src/Sunburst.js b/src/Sunburst.js
@@ -21,14 +21,15 @@ function bumpColor(c, rnd = false) {
   hsl.s += 0.5;
   hsl.l -= 0.1;
   if (rnd) {
-    hsl.h += Math.random() * 40;
+    hsl.h += Math.random() * 20;
   }
   return hsl + '';
 }
 
 function getColor(d, color) {
   const { depth } = d;
   const { prefix, name } = d.data;
+
   if (depth === 0) return 'transparent';
   if (depth === 1) {
     return color(prefix || name);
@@ -57,7 +58,17 @@ function getLegendText(d) {
   return `${label} (${percent}%)`;
 }
 
-function drawChart(data, chartDiv, color) {
+function getTopOffenders(d) {
+  if (!d) return
+  d.sort((a, b) => b.depth - a.depth);
+  const maxdepth = d[0].depth;
+  let matches = d.filter(node => node.depth === maxdepth);
+  matches.sort((a, b) => b.value - a.value);
+  const topoffenders = matches.slice(0,5);
+  return topoffenders;
+}
+
+function drawChart(nodes, chartDiv, color) {
   const width = chartDiv.clientWidth;
   const radius = width / 2;
   const x = scaleLinear().range([0, 2 * Math.PI]);
@@ -74,18 +85,12 @@ function drawChart(data, chartDiv, color) {
   const legend = d3_select(chartDiv)
     .select('.legend');
 
-  const partition = d3_partition();
-
   const arc = d3_arc()
     .startAngle(d => Math.max(0, Math.min(2 * Math.PI, x(d.x0))))
     .endAngle(d => Math.max(0, Math.min(2 * Math.PI, x(d.x1))))
     .innerRadius(d => Math.max(0, y(d.y0)))
     .outerRadius(d => Math.max(0, y(d.y1)));
 
-  const root = d3_hierarchy(data.root || data);
-  root.sum(d => d.size);
-
-  const nodes = partition(root).descendants();
   // console.log('root', nodes);
 
   const arcs = wrapper
@@ -162,7 +167,10 @@ function drawChart(data, chartDiv, color) {
       d => Math.cos(x(1 - d.x1 + 0.5)) * y(1.33)
     );
 
+
   function onMouseEnterArc(d) {
+    d3_select(this).style('opacity', (0.8 - d.depth / 5));
+
     if (d.depth) {
       legend
         .classed('active', true)
@@ -171,17 +179,46 @@ function drawChart(data, chartDiv, color) {
   }
 
   function onMouseLeaveArc(d) {
+    d3_select(this).style('opacity', (1 - d.depth / 5));
+
     legend
-      .classed('active', false)
-      .text(LEGEND);
+      .classed('active', false);
   }
 }
 
+
+const Table = (props) => (
+  <table>
+    <thead>
+      <tr>
+        <th className="left-align py1">Name</th>
+        <th className="right-align py1">Size</th>
+      </tr>
+    </thead>
+    <tbody>
+      {props.data.map((d) => (
+        <tr key={d.data.key}>
+          <td className="left-align py1 border-top">
+            {d.parent.depth > 0 ? `${d.parent.data.name} » ` : ''}
+            {d.data.name}
+          </td>
+          <td className="right-align py1 border-top">{d.data.size}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
 class Sunburst extends Component {
+  state = {
+    offenders: []
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.redraw);
     this.color = scaleOrdinal(scheme);
     if (this.props.data) {
+      this.processData(this.props.data);
       this.redraw();
     }
   }
@@ -191,15 +228,26 @@ class Sunburst extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    drawChart(nextProps.data, this.el, this.color);
+    this.processData(nextProps.data);
+    drawChart(this.nodes, this.el, this.color);
+    const offenders = getTopOffenders(this.nodes);
+    this.setState({ offenders });
+  }
+
+  processData(data) {
+    const partition = d3_partition();
+    const root = d3_hierarchy(data.root || data);
+    root.sum(d => d.size);
+    this.nodes = partition(root).descendants();
   }
 
   redraw = () => {
-    drawChart(this.props.data, this.el, this.color);
+    drawChart(this.nodes, this.el, this.color);
   };
 
   render() {
     const { classNames = '', title, count } = this.props;
+    const { offenders } = this.state;
 
     return (
       <div className={`${classNames} sunburst`} ref={el => (this.el = el)}>
@@ -214,7 +262,12 @@ class Sunburst extends Component {
           </g>
         </svg>
         <div className="legend">{LEGEND}</div>
-        <div className="count">{count}</div>
+        {offenders.length > 1 ?
+          <div>
+            <p>Ranking</p>
+            <Table data={offenders} />
+        </div> : null }
+
       </div>
     );
   }

diff --git a/src/Usage.js b/src/Usage.js
@@ -132,6 +132,12 @@ class Usage extends Component {
     const progress = metricNames.length > 0 ? (metricsCount / metricNames.length * 100).toFixed(1) : 'Loading...';
     const took = (latency / 1000).toFixed(1);
     const colClasses = `col-6 flex-auto ${classNames}`;
+    const sunburstTitle = (title, metrics, name) => (
+      <tspan>
+        <tspan className="sunburstTitle">{title}</tspan>
+        <tspan dy="1.4em" x="0">{metrics} {name}</tspan>
+      </tspan>
+    );
 
     return (
       <div className="usage">
@@ -156,11 +162,17 @@ class Usage extends Component {
         </div>
         <div className="flex">
           <div className={colClasses}>
-            <Sunburst data={metrics} title="Metric Cardinalities" count={`${metricsCount} metrics`} />
+            <Sunburst
+              data={metrics}
+              title={sunburstTitle('Metric Cardinalities', metricsCount, 'metrics')}
+              count={`${metricsCount} metrics`} />
           </div>
           <div className="p4" />
           <div className={colClasses}>
-            <Sunburst data={grouped} title="Jobs" count={`${groupedCount} jobs`} />
+            <Sunburst
+              data={grouped}
+              title={sunburstTitle('Jobs', groupedCount, 'jobs')}
+              count={`${groupedCount} jobs`} />
           </div>
         </div>
       </div>